Vision API in Dialogflow einbinden

In diesem Codelab binden Sie die Vision API in Dialogflow ein, um umfangreiche und dynamische Antworten auf Grundlage von maschinellem Lernen auf von Nutzern bereitgestellte Bildeingaben zu erhalten. Sie erstellen eine Chatbot-App, die ein Bild als Eingabe akzeptiert, es in der Vision API verarbeitet und dem Nutzer ein identifiziertes Wahrzeichen zurückgibt. Wenn der Nutzer beispielsweise ein Bild des Taj Mahal hochlädt, gibt der Chatbot „Taj Mahal“ als Antwort zurück.

Das ist nützlich, weil Sie die Elemente im Bild analysieren und auf die gewonnenen Informationen reagieren können. Sie können auch ein System zur Bearbeitung von Erstattungen entwickeln, mit dem Nutzer Belege hochladen, das Kaufdatum im Beleg extrahieren und die Erstattung verarbeiten können, wenn das Datum angemessen ist.

Sehen Sie sich den folgenden Beispieldialog an:

Nutzer: Hallo

Chatbot: Hallo! Sie können ein Bild hochladen, um Sehenswürdigkeiten zu erkunden.

Nutzer: Lade ein Bild mit dem Taj Mahal hoch.

Chatbot: Die Datei wird verarbeitet. Hier sind die Ergebnisse: Taj Mahal, Taj Mahal Garden, Taj Mahal.

Vorbereitung

Bevor Sie fortfahren, müssen Sie die folgenden Codelabs durcharbeiten:

1. Terminplaner mit Dialogflow erstellen
2. Dialogflow-Chatbot in Actions on Google einbinden
3. Entitäten in Dialogflow verstehen
4. Django-Client für eine Dialogflow-App erstellen

Außerdem müssen Sie die grundlegenden Konzepte und Konstrukte von Dialogflow kennen. Diese können Sie den folgenden Videos im Lernpfad Chatbot mit Dialogflow erstellen entnehmen:

Lerninhalte

• Dialogflow-Agent erstellen
• Dialogflow-Agent aktualisieren, um Dateien hochzuladen
• Vision API-Verbindung mit Dialogflow-Fulfillment einrichten
• Django-Frontend-App für Dialogflow einrichten und ausführen
• Django-Frontend-App in Google Cloud in App Engine bereitstellen
• Dialogflow-App über ein benutzerdefiniertes Frontend testen

Aufgaben

• Dialogflow-Agent erstellen
• Django-Frontend zum Hochladen einer Datei implementieren
• Dialogflow-Auftragsausführung implementieren, um die Vision API für das hochgeladene Bild aufzurufen

Voraussetzungen

• Grundlegende Python-Kenntnisse
• Grundlegende Kenntnisse von Dialogflow
• Grundlegende Kenntnisse der Vision API

Sie erstellen einen neuen Konversationsmodus mit einem benutzerdefinierten Django-Frontend und erweitern ihn, um ihn in die Vision API einzubinden. Sie erstellen das Frontend mit dem Django-Framework, führen es lokal aus, testen es und stellen es dann in App Engine bereit. Das Frontend sieht so aus:

Der Anfragefluss sieht so aus:

1. Der Nutzer sendet eine Anfrage über das Frontend.
2. Dadurch wird ein Aufruf der Dialogflow-API „detectIntent“ ausgelöst, um die Äußerung des Nutzers dem richtigen Intent zuzuordnen.
3. Sobald der Intent „Sehenswürdigkeit erkunden“ erkannt wird, sendet die Dialogflow-Auftragsausführung eine Anfrage an die Vision API, empfängt eine Antwort und sendet sie an den Nutzer.

So sieht die Gesamtarchitektur aus.

Die Vision API ist ein vortrainiertes ML-Modell, das Informationen aus Bildern ableitet. Sie können damit verschiedene Informationen erhalten, z. B. Bildlabels, Gesichts- und Sehenswürdigkeiten-Erkennung, optische Zeichenerkennung und das Tagging expliziter Inhalte. Weitere Informationen finden Sie unter Vision AI.

1. Rufen Sie die Dialogflow-Konsole auf.
2. Melden Sie sich an. Wenn Sie die App zum ersten Mal verwenden, registrieren Sie sich mit Ihrer E‑Mail-Adresse.
3. Akzeptieren Sie die Nutzungsbedingungen. Sie werden dann zur Konsole weitergeleitet.
4. Klicken Sie auf , scrollen Sie nach unten und klicken Sie auf Neuen Agent erstellen.

5. Geben Sie „VisionAPI“ als Agent name (Agentname) ein.

5. Klicken Sie auf Erstellen.

Dialogflow erstellt die folgenden zwei Standard-Intents als Teil des Agents:

1. Mit dem Standard-Begrüßungs-Intent werden Nutzer begrüßt.
2. Der Standard-Fallback-Intent fängt alle Fragen ab, die Ihr Bot nicht versteht.

An diesem Punkt haben Sie einen funktionierenden Bot, der Nutzer begrüßt. Sie müssen ihn jedoch aktualisieren, damit Nutzer wissen, dass sie ein Bild hochladen können, um Sehenswürdigkeiten zu erkunden.

Standard-Begrüßungs-Intent aktualisieren, um den Nutzer aufzufordern, ein Bild hochzuladen

1. Klicken Sie auf Default Welcome Intent (Standard-Begrüßungs-Intent).
2. Rufen Sie Antworten > Standard > Text- oder SSML-Antwort auf und geben Sie „Hallo! Sie können ein Bild hochladen, um Sehenswürdigkeiten zu erkunden.“

Entität erstellen

1. Klicken Sie auf Entitäten.

2. Klicken Sie auf Create Entity (Entität erstellen), geben Sie „filename“ (Dateiname) ein und klicken Sie auf Save (Speichern).

Neuen Intent erstellen

1. Klicken Sie auf Intents> Create Intent (Intent erstellen).
2. Geben Sie „Explore uploaded image“ als Intent name (Intent-Name) ein.
3. Klicken Sie auf Training phrases (Trainingsformulierungen) > Add Training Phrases (Trainingsformulierungen hinzufügen) und geben Sie „file is demo.jpg“ (Datei ist demo.jpg) und „file is taj.jpeg“ (Datei ist taj.jpeg) als Nutzerausdrücke mit @filename als Entität ein.

4. Klicken Sie auf Antworten > Antwort hinzufügen > Standard> Text- oder SSML-Antwort. Geben Sie „Datei bewerten“ ein und klicken Sie auf Antworten hinzufügen.

5. Klicken Sie auf Fulfillment (Auftragsausführung) > Enable fulfillment (Auftragsausführung aktivieren) und aktivieren Sie Enable webhook call for this intent (Webhook-Aufruf für diesen Intent aktivieren).

1. Klicken Sie auf Ausführung.
2. Aktivieren Sie den Inline-Editor.

3. Aktualisieren Sie index.js mit dem folgenden Code und YOUR-BUCKET-NAME mit dem Namen Ihres Cloud Storage-Buckets.

'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. Fügen Sie Folgendes in package.json ein, um den Inhalt zu ersetzen.

{
  "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. Klicken Sie auf Speichern .

1. Klonen Sie dieses Repository auf Ihren lokalen Computer:

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

2. Wechseln Sie zu dem Verzeichnis, das den Code enthält. Alternativ können Sie das Beispiel als ZIP-Datei herunterladen und extrahieren.

cd visionapi-dialogflow

Nach der Bereitstellung verwendet die Anwendung den in die App Engine-Standardumgebung integrierten Cloud SQL-Proxy, um mit der Cloud SQL-Instanz zu kommunizieren. Sie müssen jedoch eine lokale Kopie des Cloud SQL-Proxys in Ihrer Entwicklungsumgebung installieren und verwenden, um die Anwendung lokal zu testen. Weitere Informationen finden Sie unter Informationen zum Cloud SQL-Proxy.

Für einfache Verwaltungsaufgaben in der Cloud SQL-Instanz können Sie den Cloud SQL for MySQL-Client verwenden.

Hinweis : Sie müssen sich mit dem gcloud-Befehlszeilentool authentifizieren, um den Proxy zum Herstellen einer Verbindung von Ihrem lokalen Computer zu verwenden.

Cloud SQL-Proxy installieren

Laden Sie den Cloud SQL-Proxy mit dem folgenden Befehl herunter und installieren Sie ihn. Der Cloud SQL-Proxy wird verwendet, um eine Verbindung zu Ihrer Cloud SQL-Instanz herzustellen, wenn Programme lokal ausgeführt werden.

Laden Sie den Proxy herunter:

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

Machen Sie den Proxy ausführbar.

chmod +x cloud_sql_proxy

Cloud SQL-Instanz erstellen

1. Cloud SQL for MySQL-Instanz der zweiten Generation erstellen: Geben Sie als Namen polls-instance oder einen ähnlichen Namen ein. Es kann einige Minuten dauern, bis die Instanz bereit ist. Sobald das der Fall ist, wird sie in der Instanzenliste aufgeführt.
2. Führen Sie nun mit dem gcloud-Befehlszeilentool den folgenden Befehl aus. Dabei stellt [YOUR_INSTANCE_NAME] den Namen der Cloud SQL-Instanz dar. Notieren Sie sich den für connectionName angezeigten Wert, Sie benötigen ihn für den nächsten Schritt. Sie wird im Format [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] angezeigt.

gcloud sql instances describe [YOUR_INSTANCE_NAME]

Alternativ können Sie in der Konsole auf die Instanz klicken, um den Name der Instanzverbindung abzurufen.

Cloud SQL-Instanz initialisieren

Starten Sie den Cloud SQL-Proxy mit dem Wert für connectionName aus dem vorherigen Abschnitt.

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

Ersetzen Sie [YOUR_INSTANCE_CONNECTION_NAME] durch den Wert, den Sie im vorherigen Abschnitt notiert haben. Dadurch wird eine Verbindung vom lokalen Computer zur Cloud SQL-Instanz hergestellt, um lokale Tests durchführen zu können. Brechen Sie die Ausführung des Cloud SQL-Proxys nicht ab, solange Sie die Anwendung noch lokal testen.

Als Nächstes müssen Sie einen neuen Cloud SQL-Nutzer mit einer verknüpften Datenbank erstellen.

1. Erstellen Sie mit der Google Cloud Console eine neue Datenbank für Ihre Cloud SQL-Instanz mit dem Namen polls-instance. Sie können beispielsweise „Umfragen“ als Namen eingeben.
2. Erstellen Sie mithilfe der Cloud Console einen neuen Nutzer für Ihre Cloud SQL-Instanz mit dem Namen polls-instance.

Datenbankeinstellungen konfigurieren

1. Öffnen Sie mysite/settings-changeme.py zum Bearbeiten.
2. Benennen Sie die Datei in setting.py um.
3. Ersetzen Sie an zwei Stellen [YOUR-USERNAME] und [YOUR-PASSWORD] durch den Datenbanknutzernamen und das Passwort, die Sie im vorherigen Abschnitt erstellt haben. So wird die Verbindung zur Datenbank für die App Engine-Bereitstellung und lokale Tests eingerichtet.
4. Ersetzen Sie in Zeile ‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]' [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] durch den Instanznamen, den Sie im vorherigen Abschnitt abgerufen haben.
5. Führen Sie den folgenden Befehl aus und kopieren Sie den ausgegebenen Wert connectionName für den nächsten Schritt.

gcloud sql instances describe [YOUR_INSTANCE_NAME]

6. Ersetzen Sie [YOUR-CONNECTION-NAME] durch den Wert, den Sie im vorherigen Schritt notiert haben.
7. Ersetzen Sie [YOUR-DATABASE] durch den Namen, den Sie im vorherigen Abschnitt ausgewählt haben.

# [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. Schließen und speichern Sie settings.py.

1. Klicken Sie in der Dialogflow-Konsole auf . Rufen Sie auf dem Tab Allgemein Google-Projekt> Projekt-ID auf und klicken Sie auf Google Cloud, um die Cloud Console zu öffnen.
2. Klicken Sie auf das Navigationsmenü ☰> IAM & Verwaltung > Dienstkonten. Klicken Sie dann neben Dialogflow-Integrationen auf  und dann auf Schlüssel erstellen.

3. Eine JSON-Datei wird auf Ihren Computer heruntergeladen. Sie benötigen sie in den folgenden Einrichtungsabschnitten.

1. Ersetzen Sie im Chatordner key-sample.json durch Ihre JSON-Datei mit Anmeldedaten und benennen Sie sie in key.json um.
2. Ändern Sie in views.py im Chatordner GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" in Ihre Projekt-ID.

Cloud Storage-Bucket für statische Frontend-Objekte erstellen

1. Klicken Sie in der Cloud Console auf das Navigationsmenü ☰> Storage.

2. Klicken Sie auf Bucket erstellen.
3. Geben Sie einen global eindeutigen Namen an.

4. Speicherort für Daten auswählen Wählen Sie Region aus und dann den Standort, der Ihren Anforderungen am besten entspricht.
5. Wählen Sie Standard als Standardspeicherklasse aus.

6. Wählen Sie Berechtigungen einheitlich auf Bucket-Ebene festlegen (nur Bucket-Richtlinie) aus und klicken Sie dann auf Weiter, um den Bucket zu erstellen.

7. Klicken Sie nach dem Erstellen des Buckets auf das Navigationsmenü ☰> Speicher> Browser und suchen Sie den erstellten Bucket.

8. Klicken Sie neben dem entsprechenden Bucket auf  und dann auf Bucket-Berechtigungen bearbeiten.

9. Klicken Sie auf Mitglieder hinzufügen, dann auf Neue Mitglieder, geben Sie „allUsers“ ein und klicken Sie auf Rolle auswählen > Storage-Objekt-Betrachter. Dadurch erhalten allUsers Lesezugriff auf die statischen Frontend-Dateien. Das ist keine ideale Sicherheitseinstellung für die Dateien, aber für dieses Codelab funktioniert sie.

Cloud Storage-Bucket für von Nutzern hochgeladene Bilder erstellen

Folgen Sie derselben Anleitung, um einen separaten Bucket zum Hochladen von Nutzerbildern zu erstellen. Legen Sie die Berechtigungen wieder auf „allUsers“ fest, wählen Sie aber Storage-Objekt-Ersteller und Storage-Objekt-Betrachter als Rollen aus.

Cloud Storage-Bucket in „settings.py“ konfigurieren

1. Öffnen Sie mysite/setting.py.
2. Suchen Sie die Variable GCS_BUCKET und ersetzen Sie ‘<YOUR-GCS-BUCKET-NAME>' durch Ihren statischen Cloud Storage-Bucket.
3. Suchen Sie die Variable GS_MEDIA_BUCKET_NAME und ersetzen Sie ‘<YOUR-GCS-BUCKET-NAME-MEDIA>' durch den Namen Ihres Cloud Storage-Buckets für die Bilder.
4. Suchen Sie die Variable GS_STATIC_BUCKET_NAME und ersetzen Sie ‘<YOUR-GCS-BUCKET-NAME-STATIC>' durch den Namen Ihres Cloud Storage-Buckets für die statischen Dateien.
5. Speichern Sie die Datei.

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-Bucket in „home.html“ konfigurieren

• Öffnen Sie den Chatordner, dann templates und benennen Sie home-changeme.html in home.html um.
• Suchen Sie nach <YOUR-GCS-BUCKET-NAME-MEDIA> und ersetzen Sie es durch den Namen des Buckets, in dem die vom Nutzer hochgeladene Datei gespeichert werden soll. So können Sie die vom Nutzer hochgeladene Datei nicht im Frontend speichern und die statischen Assets im Cloud Storage-Bucket behalten. Die Vision API ruft den Cloud Storage-Bucket auf, um die Datei abzurufen und die Vorhersage zu treffen.

Zum Ausführen der Django-App auf Ihrem lokalen Computer müssen Sie eine Python-Entwicklungsumgebung einrichten, einschließlich Python, pip und virtualenv. Eine Anleitung finden Sie unter Python-Entwicklungsumgebung einrichten.

1. Erstellen Sie eine isolierte Python-Umgebung und installieren Sie Abhängigkeiten:

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

2. Führen Sie die Django-Migrationen aus, um die Modelle einzurichten.

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

3. Starten Sie einen lokalen Webserver:

python3 manage.py runserver

4. Rufen Sie in Ihrem Webbrowser http://localhost:8000/ auf. Sie sollten eine einfache Webseite sehen, die so aussieht:

Die Beispiel-App-Seiten werden vom Django-Webserver bereitgestellt, der auf Ihrem Computer ausgeführt wird. Wenn Sie fortfahren möchten, drücken Sie Control+C (Command+C auf Macintosh), um den lokalen Webserver zu beenden.

Admin-Konsole von Django verwenden

1. Erstellen Sie einen Superuser:

python3 manage.py createsuperuser

2. Starten Sie einen lokalen Webserver:

python3 manage.py runserver

3. Rufen Sie in Ihrem Webbrowser http://localhost:8000/admin/ auf. Geben Sie zum Anmelden auf der Administratorwebsite den Nutzernamen und das Passwort ein, die Sie beim Ausführen von createsuperuser erstellt haben.

Sammeln Sie alle statischen Inhalte in einem Ordner, indem Sie den folgenden Befehl ausführen, der alle statischen Dateien der App in den durch STATIC_ROOT angegebenen Ordner in settings.py verschiebt:

python3 manage.py collectstatic

Laden Sie die App hoch, indem Sie im Verzeichnis der App, in dem sich die Datei app.yaml befindet, den folgenden Befehl ausführen:

gcloud app deploy

Warten Sie auf die Nachricht, dass das Update abgeschlossen ist.

Rufen Sie in Ihrem Webbrowser https://<your_project_id>.appspot.com auf.

Dieses Mal wird Ihre Anfrage von einem Webserver bearbeitet, der in der App Engine-Standardumgebung ausgeführt wird.

Mit dem Befehl app deploy wird die App wie unter app.yaml beschrieben bereitgestellt und die neu bereitgestellte Version als Standardversion festgelegt. Dadurch wird der gesamte neue Traffic verarbeitet.

Wenn Sie den Inhalt für die Produktion bereitstellen möchten, ändern Sie in mysite/settings.py die Variable DEBUG in False.

Sie können Ihren Chatbot im Simulator testen oder die Web- oder Google Home-Integration verwenden, die Sie zuvor erstellt haben.

1. Nutzer: „Hallo“
2. Chatbot: „Hallo! Sie können ein Bild hochladen, um Sehenswürdigkeiten zu erkunden.“
3. Der Nutzer lädt ein Bild hoch.

Laden Sie dieses Bild herunter, benennen Sie es demo.jpg und verwenden Sie es.

4. Chatbot: „Die Datei wird verarbeitet. Hier sind die Ergebnisse: Golden Gate Bridge, Golden Gate National Recreation Area, Golden Gate Bridge, Golden Gate Bridge, Golden Gate Bridge.“

Insgesamt sollte es so aussehen:

Wenn Sie andere Dialogflow-Codelabs durcharbeiten möchten, überspringen Sie diesen Abschnitt und kehren Sie später dazu zurück.

Dialogflow-Agent löschen

1. Klicken Sie neben Ihrem vorhandenen Agent auf .

2. Scrollen Sie auf dem Tab Allgemein nach unten und klicken Sie auf Diesen Agent löschen.
3. Geben Sie im eingeblendeten Fenster Löschen ein und klicken Sie auf Löschen.

Sie haben einen Chatbot in Dialogflow erstellt und in die Vision API eingebunden. Sie sind jetzt Chatbot-Entwickler!

Weitere Informationen

Weitere Informationen finden Sie in den Codebeispielen auf der Seite Dialogflow GitHub.