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

Diese Seite wurde von der Cloud Translation API übersetzt.

Vision API in Dialogflow einbinden

In diesem Codelab werden Sie die Vision API in Dialogflow einbinden. So erhalten Sie umfassende und dynamische Antworten auf Basis von maschinellem Lernen auf von Nutzern bereitgestellte Bildeingaben. Sie erstellen eine Chatbot-App, die ein Bild als Eingabe aufnimmt, in der Vision API verarbeitet und ein identifiziertes Wahrzeichen an den Nutzer zurückgibt. Wenn der Nutzer zum Beispiel ein Bild des Taj Mahal hochlädt, gibt der Chatbot Taj Mahal als Antwort zurück.

Dies ist nützlich, weil Sie die Elemente im Bild analysieren und entsprechende Maßnahmen ergreifen können. Sie können auch ein System zur Erstattungsverarbeitung erstellen, das Nutzern beim Hochladen von Belegen hilft, das Kaufdatum im Beleg extrahiert und die Erstattung bei Bedarf verarbeitet.

Sehen Sie sich das folgende Beispieldialogfeld an:

Nutzer: Hallo

Chatbot: Hallo! Sie können ein Bild hochladen, um sich Sehenswürdigkeiten anzusehen

Nutzer: Laden Sie ein Bild mit Taj Mahal hoch.

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

Vorbereitung

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

Außerdem lernen Sie die grundlegenden Konzepte und Konstrukte von Dialogflow kennen. Sie können daraus die folgenden Videos im Pfad Build a chatbot with Dialogflow (nur auf Englisch verfügbar) ableiten:

Lerninhalte

Dialogflow-Agent erstellen
Dialogflow-Agent zum Hochladen von Dateien aktualisieren
Vision API-Verbindung mit Dialogflow-Ausführung einrichten
JWT-Front-End-App für Dialogflow einrichten und ausführen
JWT-Front-End-App in App Engine in Google Cloud bereitstellen
Dialogflow-Anwendung über ein benutzerdefiniertes Front-End testen

Aufgaben

Dialogflow-Agent erstellen
JWT-Front-End zum Hochladen einer Datei implementieren
Dialogflow-Auftragsausführung implementieren, um die Vision API für das hochgeladene Bild aufzurufen

Voraussetzungen

Grundkenntnisse in Python
Grundlegendes Verständnis von Dialogflow
Grundlegendes Verständnis der Vision API

Sie erstellen eine neue Unterhaltung mit einem benutzerdefinierten JWT-Front-End und erweitern sie zur Einbindung in die Vision API. Sie erstellen das Front-End mit dem JWT-Framework, führen es aus und testen es lokal und stellen es dann in App Engine bereit. Das Front-End sieht so aus:

Der Anfrageablauf funktioniert wie in der folgenden Abbildung dargestellt:

Der Nutzer sendet eine Anfrage über das Front-End.
Dadurch wird ein Aufruf an die Dialogflow-Intent-API ausgelöst, um die Äußerung des Nutzers dem richtigen Intent zuzuordnen.
Sobald der erkennbare Intent erkannt wird, sendet Dialogflow Fulfillment eine Anfrage an die Vision API, erhält eine Antwort und sendet sie an den Nutzer.

Hier sehen Sie die Gesamtarchitektur.

Die Vision API ist ein vortrainiertes ML-Modell, das Informationen aus Bildern abgeleitet. Mit Google Analytics erhalten Sie viele Einsichten, z. B. zur Bilderkennung, zur Gesichtserkennung, zur optischen Zeichenerkennung und zum Taggen anstößiger Inhalte. Weitere Informationen finden Sie unter Vision AI.

Rufen Sie die Dialogflow-Konsole auf.
Anmelden. Wenn Sie noch kein Abonnent sind, können Sie sich mit Ihrer E-Mail-Adresse registrieren.
Akzeptieren Sie die Nutzungsbedingungen und Sie befinden sich in der Konsole.
Klicken Sie auf , scrollen Sie nach unten und klicken Sie dann auf Neuen Agent erstellen.

5. Geben Sie „VisionAPI“ als Agent-Name ein.

Klicken Sie auf Erstellen.

Dialogflow erstellt im Rahmen des Agents die folgenden zwei Standard-Intents:

Der Standard-Begrüßungs-Intent wird zur Begrüßung Ihrer Nutzer verwendet.
Der Standard-Fallback-Intent erfasst alle Fragen, die Ihr Bot nicht versteht.

An diesem Punkt haben Sie einen funktionsfähigen 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 entdecken.

Standard-Begrüßungs-Intent aktualisieren, um den Nutzer über den Upload des Bildes zu informieren

Klicken Sie auf Default Welcome Intent.
Gehen Sie zu Antworten> Standard > Text oder SSML-Antwort und geben Sie „Hi!“ ein. Sie können ein Bild hochladen, um Sehenswürdigkeiten zu entdecken."

Entität erstellen

Klicken Sie auf Entitäten.

Klicken Sie auf Entität erstellen, nennen Sie sie „&filet;“ und klicken Sie dann auf Speichern.

Neuen Intent erstellen

Klicken Sie auf Intents und dann auf Intent erstellen.
Geben Sie „Hochgeladenes Bild ansehen“ als Intent-Name ein.
Klicken Sie auf Trainingsformulierungen > Trainingsformulierungen hinzufügen und geben Sie die Datei demo.jpg mit der Datei demo.jpg&filettaj.jpeg ein.

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

Klicken Sie auf Auftragsausführung und dann auf Auftragsausführung aktivieren und aktivieren Sie die Option Webhook-Aufruf für diesen Intent aktivieren.

Klicken Sie auf Fulfillment (Auftragsausführung).
Aktivieren Sie den Inline-Editor.

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

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

Klicken Sie auf Save (Speichern).

Klonen Sie dieses Repository auf Ihrem lokalen Computer:

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

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

cd visionapi-dialogflow

Wenn Ihre Anwendung bereitgestellt wird, verwendet sie den Cloud SQL-Proxy, der in die App Engine-Standardumgebung integriert ist, um mit Ihrer Cloud SQL-Instanz zu kommunizieren. Zum Testen Ihrer Anwendung müssen Sie jedoch eine lokale Kopie des Cloud SQL-Proxys in Ihrer Entwicklungsumgebung installieren und verwenden. Weitere Informationen finden Sie unter Der Cloud SQL-Proxy.

Wenn Sie einfache Administratoraufgaben auf Ihrer Cloud SQL-Instanz ausführen möchten, können Sie den Cloud SQL for MySQL-Client 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 bei lokaler Ausführung eine Verbindung zu Ihrer Cloud SQL-Instanz herzustellen.

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

Erstellen Sie eine Cloud SQL für MySQL-Instanz der zweiten Generation. Geben Sie "polls-instance" oder ein ähnliches Wort wie den Namen ein. Es kann einige Minuten dauern, bis die Instanz bereit ist. Nach Abschluss sollte sie in der Instanzliste zu sehen sein.
Führen Sie nun mit dem gcloud-Befehlszeilentool den folgenden Befehl aus, wobei [YOUR_INSTANCE_NAME] den Namen Ihrer Cloud SQL-Instanz darstellt. Notieren Sie sich den Wert, der für den nächsten Schritt für connectionName angezeigt wird. Sie hat das Format [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME].

gcloud sql instances describe [YOUR_INSTANCE_NAME]

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

Cloud SQL-Instanz initialisieren

Starten Sie den Cloud SQL-Proxy mit dem 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 aufgezeichnet haben. Zu diesem Zweck wird eine Verbindung zwischen Ihrem lokalen Computer und Ihrer Cloud SQL-Instanz hergestellt. Lassen Sie den Cloud SQL-Proxy die ganze Zeit ausführen, während Sie die Anwendung lokal testen.

Erstellen Sie als Nächstes einen neuen Cloud SQL-Nutzer und eine neue Cloud SQL-Datenbank.

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

Datenbankeinstellungen konfigurieren

Öffnen Sie mysite/settings-changeme.py zum Bearbeiten.
Benennen Sie die Datei in setting.py um.
Ersetzen Sie [YOUR-USERNAME] und [YOUR-PASSWORD] an zwei Stellen durch den Nutzernamen und das Passwort, die Sie im vorherigen Abschnitt erstellt haben. Damit können Sie die Verbindung zur Datenbank für die App Engine-Bereitstellung und lokale Tests herstellen.
Ersetzen Sie in Zeile ‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]&#39 [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] durch Ihren Instanznamen, der im vorherigen Abschnitt erworben wurde.
Führen Sie den folgenden Befehl aus und kopieren Sie den ausgegebenen connectionName-Wert für den nächsten Schritt.

gcloud sql instances describe [YOUR_INSTANCE_NAME]

Ersetzen Sie [YOUR-CONNECTION-NAME] durch den Wert, den Sie im vorherigen Schritt aufgezeichnet haben
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]

Schließen und speichern Sie settings.py.

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

Daraufhin wird eine JSON-Datei auf Ihren Computer heruntergeladen, die Sie in den folgenden Abschnitten zur Einrichtung benötigen.

Ersetzen Sie key-sample.json im Chatordner durch Ihre JSON-Datei mit den Anmeldedaten und nennen Sie sie key.json.

Ändern Sie in views.py im Chatordner den GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" in Ihre Projekt-ID.

Cloud Storage-Bucket für statische Front-End-Objekte erstellen

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

Klicken Sie auf Bucket erstellen.

Geben Sie einen global eindeutigen Namen an.

Speicherort für Daten auswählen Wählen Sie Region aus und entscheiden Sie sich dann für den Standort, der Ihren Anforderungen am besten entspricht.

Wählen Sie Standard als Standardspeicherklasse aus.

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

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

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

Klicken Sie auf Mitglieder hinzufügen und dann auf Neue Mitglieder. Geben Sie „&allUsers“ usw. ein, klicken Sie auf Rolle auswählen und wählen Sie Storage-Objekt-Betrachter aus. Hiermit wird der Lesezugriff auf die statischen Front-End-Dateien für allUsers gewährt. Das ist keine optimale Sicherheitseinstellung für die Dateien, sie funktioniert aber in diesem Codelab.

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

Erstellen Sie anhand der gleichen Anleitung einen separaten Bucket zum Hochladen von Nutzerbildern. Legen Sie die Berechtigungen auf „allUsers“ fest, wählen Sie aber Storage-Objekt-Ersteller und Speicherobjekt-Betrachter als Rollen aus.

Cloud Storage-Bucket in settings.py konfigurieren

Öffnen Sie mysite/setting.py.

Suchen Sie die Variable GCS_BUCKET und ersetzen Sie ‘<YOUR-GCS-BUCKET-NAME>' durch Ihren Cloud Storage-statischen Bucket.

Suchen Sie die Variable GS_MEDIA_BUCKET_NAME und ersetzen Sie ‘<YOUR-GCS-BUCKET-NAME-MEDIA>' durch den Cloud Storage-Bucket-Namen für die Images.

Suchen Sie die Variable GS_STATIC_BUCKET_NAME und ersetzen Sie ‘<YOUR-GCS-BUCKET-NAME-STATIC>' durch Ihren Cloud Storage-Bucket-Namen für die statischen Dateien.

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 ihn durch den Bucket-Namen, in dem die von Nutzern hochgeladene Datei gespeichert werden soll. Dadurch wird verhindert, dass Sie die von Nutzern hochgeladene Datei im Front-End speichern und statische Assets im Cloud Storage-Bucket beibehalten. Die Vision API ruft den Cloud Storage-Bucket auf, um die Datei abzurufen und die Vorhersage zu treffen.

Um die JWT-Anwendung auf dem lokalen Computer auszuführen, müssen Sie eine Python-Entwicklungsumgebung einrichten, einschließlich Python, pip und nowrap. Eine Anleitung dazu finden Sie unter Python-Entwicklungsumgebung einrichten.

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

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

Führen Sie die JWT-Migrationen aus, um Ihre Modelle einzurichten.

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

Starten Sie einen lokalen Webserver:

python3 manage.py runserver

Gehen Sie in Ihrem Webbrowser zu http://localhost:8000/. Sie sollten eine einfache Webseite sehen, die so aussieht:

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

Admin-Konsole von Django verwenden

Erstellen Sie einen Superuser:

python3 manage.py createsuperuser

Starten Sie einen lokalen Webserver:

python3 manage.py runserver

Rufen Sie in Ihrem Webbrowser http://localhost:8000/admin/ auf. Wenn Sie sich auf der Administratorwebsite anmelden möchten, geben Sie den Nutzernamen und das Passwort ein, die Sie bei der Ausführung von createsuperuser erstellt haben.

Führen Sie den folgenden Befehl aus, um alle statischen Inhalte in einem Ordner zu speichern. Dadurch werden alle statischen Dateien der Anwendung in den von STATIC_ROOT in settings.py angegebenen Ordner verschoben:

python3 manage.py collectstatic

Lade die App hoch, indem du den folgenden Befehl aus dem Verzeichnis der App ausführst, in dem sich die app.yaml-Datei befindet:

gcloud app deploy

Warten Sie, bis die Meldung angezeigt wird, dass das Update abgeschlossen ist.

Gehen Sie in Ihrem Webbrowser zu https://<your_project_id>.appspot.com

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 in app.yaml beschrieben bereitgestellt und die neu bereitgestellte Version als Standardversion festgelegt. Dadurch wird der gesamte neue Traffic verarbeitet.

Wenn Sie Ihre Inhalte in der Produktion bereitstellen möchten, ändern Sie die Variable DEBUG in False in mysite/settings.py.

Sie können den Chatbot im Simulator testen oder die zuvor integrierte Web- oder Google Home-Integration verwenden.

Nutzer: "hi"

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

Der Nutzer lädt ein Bild hoch.

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

Chatbot: "Datei wird verarbeitet. Hier sind die Ergebnisse: Golden Gate Bridge,Golden Gate National Recreation Area, Goldenen Gate Bridge,Golden Gate Bridge und Goldene Gate Bridge

In der Regel sollte das so aussehen:

Wenn Sie andere Dialogflow-Codelabs abschließen möchten, überspringen Sie diesen Abschnitt und kehren Sie später hierher zurück.

Dialogflow-Agent löschen

Klicken Sie neben Ihrem vorhandenen Agent auf .

Scrollen Sie auf dem Tab Allgemein nach unten und klicken Sie auf Diesen Agent löschen.

Geben Sie in dem sich öffnenden Fenster Löschen ein und klicken Sie auf Löschen.

Sie haben einen Chatbot in Dialogflow erstellt und in die Vision API integriert. Du bist jetzt ein Chatbot-Entwickler!

Weitere Informationen

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