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

Ta strona została przetłumaczona przez Cloud Translation API.

Integracja interfejsu Vision API z Dialogflow

W tym ćwiczeniu zintegrujesz Vision API z Dialogflow, aby dostarczyć rozbudowane i dynamiczne odpowiedzi oparte na systemach uczących się na potrzeby danych wejściowych obrazu przekazywanych przez użytkowników. Tworzysz czatbota, który pobiera obraz jako dane wejściowe, przetwarza go w interfejsie Vision API i zwraca użytkownikowi określony punkt orientacyjny. Jeśli na przykład użytkownik prześle obraz Tadż Mahal, odpowiedź wyświetli czatbot.

Jest to przydatne, bo pozwala analizować produkty na zdjęciu i podejmować działania na podstawie zdobytych informacji. Możesz też utworzyć system przetwarzania zwrotów, który pomoże użytkownikom przesyłać potwierdzenia, wyodrębnić datę zakupu na potwierdzeniu i przetworzyć zwrot środków, jeśli data jest odpowiednia.

Spójrz na to przykładowe okno dialogowe:

Użytkownik: Cześć

Chatbot: Cześć! Możesz przesłać zdjęcie, aby zobaczyć punkty orientacyjne

Użytkownik: prześlij obraz, na którym widać Tadż Mahal.

Czatbot: plik jest przetwarzany. Oto wyniki: Tadż Mahal, Tadż Mahal, Tadż Mahal.

Wymagania wstępne

Zanim przejdziesz dalej, musisz wykonać te ćwiczenia z programowania:

Musisz też zapoznać się z podstawowymi pojęciami i konstrukcjami Dialogflow, które znajdziesz na tych filmach: Build a chatbot with Dialogflow:

Czego się nauczysz

Jak utworzyć agenta Dialogflow
Jak zaktualizować agenta Dialogflow, aby przesyłać pliki
Jak skonfigurować połączenie Vision API z realizacją GCP
Jak skonfigurować i uruchomić aplikację frontendową Django dla Dialogflow
Jak wdrożyć aplikację Django frontendową do Google Cloud w App Engine
Testowanie aplikacji Dialogflow z niestandardowego interfejsu

Co stworzysz

Tworzenie agenta Dialogflow
Wdrażanie Django frontendu do przesyłania plików
Zaimplementuj realizację Dialogflow, aby wywołać Vision API względem przesłanego obrazu

Czego potrzebujesz

Podstawowa znajomość Pythona
Podstawowe informacje o Dialogflow
Podstawowe informacje o interfejsie Vision API

Tworzysz nowy interfejs rozmowy z niestandardowym interfejsem Django i rozszerzasz go na integrację z interfejsem Vision API. Zbuduj frontend za pomocą platformy Django, uruchom go i przetestuj lokalnie, a następnie wdróż go w App Engine. frontend będzie wyglądał tak:

Przepływ żądania będzie wyglądać tak jak na ilustracji poniżej:

Użytkownik wysyła żądanie za pomocą frontendu.
Spowoduje to wywołanie wywołania interfejsu Dialogflow wykrywanie intencji, aby zmapować wyrażenie użytkownika na odpowiednią intencję.
Gdy wykryjesz zabytkową intencję eksploracji, realizacja Dialogflow wyśle żądanie do interfejsu Vision API, otrzyma odpowiedź i wyśle ją do użytkownika.

Oto ogólna architektura.

Vision API to wstępnie wytrenowany model ML, który pobiera statystyki z obrazów. Możesz uzyskać wiele cennych informacji, takich jak etykiety obrazów, wykrywanie twarzy i punktów orientacyjnych, optyczne rozpoznawanie znaków czy tagowanie treści dla pełnoletnich. Więcej informacji znajdziesz na stronie Vision AI.

Otwórz konsolę Dialogflow.
Zaloguj się. (jeśli jesteś nowym użytkownikiem, użyj adresu e-mail do rejestracji).
Zaakceptuj warunki korzystania z usługi, a my zrobisz to w konsoli.
Kliknij , przewiń w dół i kliknij Create new agent (Utwórz nowego agenta).

5. Jako nazwę agenta wpisz "VisionAPI&quot.

Kliknij Utwórz.

Dialogflow w ramach agenta tworzy te 2 intencje domyślne:

Domyślna intencja powitalna powitalna dla użytkowników.
Domyślna intencja zastępcza wyłapuje wszystkie pytania, których bot nie rozumie.

W tym momencie masz działającego bota, który powitał użytkowników, ale musisz go zaktualizować, aby poinformować użytkowników, że mogą przesłać obraz, aby poznać punkty orientacyjne.

Zaktualizuj domyślną intencję powitalną, aby powiadomić użytkownika o konieczności przesłania obrazu

Kliknij Domyślna intencja powitalna.
Wybierz Responses > Default > Text or SSML Response i wpisz „"Cześć! Możesz przesłać zdjęcie, aby lepiej poznać punkty orientacyjne."

Utwórz encję

Kliknij Encje.

Kliknij Utwórz encję, nadaj mu nazwę &nazwa pliku i kliknij Zapisz.

Utwórz nową intencję

Kliknij Intents (Intencja); CreateIntent (Utwórz intencję).
W polu Nazwa intencji wpisz "Przeglądaj przesłany obraz.
Kliknij Wyrażenia na potrzeby trenowania > Dodaj wyrażenia na potrzeby trenowania i wpisz &&tt;plik jest demo.jpg ", a plik to taj.jpeg" jako wyrażenia użytkownika z elementem @filename jako jednostką.

Kliknij Responses > Add Response > Default > Text or SSML Response. Wpisz &ocenianie pliku i kliknij Dodaj odpowiedzi.

Kliknij Realizacja > Włącz realizację i wybierz Włącz wywołanie webhooka dla tej intencji.

Kliknij Realizacja.
Włącz Edytor wbudowany.

Zaktualizuj index.js o ten kod, a w YOUR-BUCKET-NAME wpisz nazwę swojego zasobnika Cloud Storage.

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

Wklej ten tekst do package.json, aby zastąpić jego zawartość.

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

Kliknij Zapisz.

Skopiuj to repozytorium na komputer lokalny:

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

Przejdź do katalogu, który zawiera kod. Możesz też pobrać próbkę jako plik ZIP i wyodrębnić go.

cd visionapi-dialogflow

Podczas wdrażania Twoja aplikacja używa serwera proxy Cloud SQL wbudowanego w standardowe środowisko App Engine do komunikowania się z instancją Cloud SQL. Aby jednak przetestować aplikację lokalnie, musisz zainstalować lokalną kopię serwera proxy Cloud SQL i używać jej w środowisku programistycznym. Więcej informacji znajdziesz w artykule Informacje o serwerze proxy Cloud SQL.

Aby wykonywać podstawowe zadania administracyjne w instancji Cloud SQL, możesz użyć klienta Cloud SQL dla MySQL.

Zainstaluj serwer proxy Cloud SQL

Pobierz i zainstaluj serwer proxy Cloud SQL, korzystając z tego polecenia. Serwer proxy Cloud SQL służy do łączenia się z instancją Cloud SQL, gdy działa lokalnie.

Pobierz serwer proxy:

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

Skonfiguruj serwer proxy jako plik wykonywalny.

chmod +x cloud_sql_proxy

Tworzenie instancji Cloud SQL

Tworzenie instancji Cloud SQL dla MySQL drugiej generacji. Wpisz "sond-instance" lub podobną nazwę. Może minąć kilka minut, zanim instancja będzie gotowa. Gdy będzie gotowy, powinien być widoczny na liście instancji.
Teraz użyj narzędzia wiersza poleceń gcloud do uruchomienia tego polecenia, w którym [YOUR_INSTANCE_NAME] reprezentuje nazwę Twojej instancji Cloud SQL. Zanotuj wartość wyświetlaną w polu connectionName w następnym kroku. Jest wyświetlany w formacie [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME].

gcloud sql instances describe [YOUR_INSTANCE_NAME]

Możesz też kliknąć instancję w konsoli, aby uzyskać nazwę połączenia instancji.

Inicjowanie instancji Cloud SQL

Uruchom serwer proxy Cloud SQL, korzystając z connectionName w poprzedniej sekcji.

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

Zastąp [YOUR_INSTANCE_CONNECTION_NAME] wartością zarejestrowaną w poprzedniej sekcji. Spowoduje to nawiązanie połączenia między komputerem lokalnym a instancją Cloud SQL na potrzeby testów lokalnych. Nie wyłączaj serwera proxy Cloud SQL przez cały czas, gdy testujesz aplikację lokalnie.

Następnie utwórz nowe konto użytkownika i bazę danych Cloud SQL.

W Google Cloud Console utwórz dla swojej instancji nową bazę danych o nazwie polls-instance. Możesz na przykład wpisać „ankiety” jako nazwę.
Utwórz w Cloud Console nowego użytkownika o nazwie polls-instance.

Skonfiguruj ustawienia bazy danych

Otwórz mysite/settings-changeme.py, aby edytować.
Zmień nazwę pliku na setting.py.
W 2 miejscach zastąp [YOUR-USERNAME] i [YOUR-PASSWORD] nazwą użytkownika bazy danych i hasłem utworzonym w poprzedniej sekcji. Ułatwia to konfigurowanie połączenia z bazą danych w celu wdrażania aplikacji App Engine i testowania lokalnego.
W wierszu ‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]&#39 zastąp [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] nazwą instancji pobraną w poprzedniej sekcji.
Uruchom następujące polecenie i skopiuj uzyskane dane connectionName w następnym kroku.

gcloud sql instances describe [YOUR_INSTANCE_NAME]

Zastąp [YOUR-CONNECTION-NAME] wartością zarejestrowaną w poprzednim kroku
Zastąp [YOUR-DATABASE] nazwą wybraną w poprzedniej sekcji.

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

Zamknij i zapisz settings.py.

W konsoli Dialogflow kliknij . Na karcie General (Ogólne) przejdź do Google Project > Project ID (Identyfikator projektu) i kliknij Google Cloud , aby otworzyć Cloud Console.
Kliknij Menu nawigacyjne >Uprawnienia:

Na komputer zostanie pobrany plik JSON (wymagany jest w następnych sekcjach konfiguracyjnych).

W folderze czatu zastąp key-sample.json plikiem JSON z danymi logowania i nadaj mu nazwę key.json.
W polu views.py w folderze czatu zmień GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" na identyfikator projektu.

Tworzenie zasobnika Cloud Storage dla obiektów statycznych frontendu

W Cloud Console kliknij Nawigacja menu nawigacyjne ☰ > Pamięć.

Kliknij Utwórz zasobnik.
Podaj unikalną globalnie nazwę.

Wybierz miejsce przechowywania danych. Kliknij Region i wybierz lokalizację, która najlepiej odpowiada Twoim potrzebom.
Jako domyślną klasę pamięci wybierz Standardowa.

Wybierz Ustaw uprawnienia jednolicie na poziomie zasobnika (tylko zasady zasobnika), a następnie kliknij Dalej, aby utworzyć zasobnik.

Po utworzeniu zasobnika kliknij menu nawigacyjne ☰ > Pamięć > Przeglądarka, a następnie znajdź utworzony zasobnik.

Kliknij obok odpowiedniego zasobnika i wybierz Edytuj uprawnienia zasobnika.

Kliknij Dodaj użytkowników,kliknij Nowi użytkownicy, wpisz "allUsers, a następnie kliknij Wybierz rolę > Wyświetlający obiekty Cloud Storage. Przyznaje uprawnienia allUsers jako uprawnienia do wyświetlania plików statycznych frontendu. Nie jest to idealne ustawienie zabezpieczeń dla plików, ale na potrzeby tego konkretnego ćwiczenia z programowania.

Tworzenie zasobnika Cloud Storage na potrzeby obrazów przesłanych przez użytkowników

Wykonaj te same czynności, aby utworzyć oddzielny zasobnik do przesyłania obrazów użytkowników. Ponownie ustaw uprawnienia na „&Users”, ale wybierz role Twórca obiektów Cloud Storage i Wyświetlający obiekty Cloud Storage.

Skonfiguruj zasobnik Cloud Storage w settings.py

Otwórz aplikację mysite/setting.py.
Znajdź zmienną GCS_BUCKET i zastąp ‘<YOUR-GCS-BUCKET-NAME>' zasobnikiem statycznym Cloud Storage.
Znajdź zmienną GS_MEDIA_BUCKET_NAME i zastąp ‘<YOUR-GCS-BUCKET-NAME-MEDIA>' nazwami obrazów z zasobnika Cloud Storage.
Znajdź zmienną GS_STATIC_BUCKET_NAME i zastąp ‘<YOUR-GCS-BUCKET-NAME-STATIC>' nazwą zasobnika Cloud Storage dla plików statycznych.
Zapisz plik.

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

Skonfiguruj zasobnik Cloud Storage na stronie głównej.html

Otwórz folder czatu, a następnie otwórz templates i zmień home-changeme.html na home.html.
Wyszukaj w polu <YOUR-GCS-BUCKET-NAME-MEDIA> nazwę zasobnika, w której chcesz zapisać plik przesłany przez użytkownika. Uniemożliwi to przechowywanie plików przesłanych przez użytkownika w frontendzie i zachowanie zasobów statycznych w zasobniku Cloud Storage. Interfejs Vision API wywołuje zasobnik Cloud Storage, aby pobrać plik i wykonać prognozę.

Aby uruchomić aplikację Django na komputerze lokalnym, musisz skonfigurować środowisko programistyczne Python, w tym Python, pip i VRenv. Instrukcje znajdziesz w artykule Konfigurowanie środowiska programistycznego w języku Python.

Utwórz izolowane środowisko Pythona i zainstaluj zależności.

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

Aby skonfigurować modele, uruchom migracje Django.

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

Uruchom lokalny serwer WWW.

python3 manage.py runserver

W przeglądarce otwórz stronę http://localhost:8000/. Powinna wyświetlić się prosta strona internetowa, która wygląda tak:

Przykładowe strony aplikacji są wyświetlane przez serwer WWW Django uruchomiony na komputerze. Gdy wszystko będzie gotowe, naciśnij Control+C (Command+C na Macu), by zatrzymać lokalny serwer WWW.

W konsoli administracyjnej Django

Utwórz superużytkownika.

python3 manage.py createsuperuser

Uruchom lokalny serwer WWW.

python3 manage.py runserver

W przeglądarce otwórz stronę http://localhost:8000/admin/. Aby zalogować się na stronie administratora, wpisz nazwę użytkownika i hasło utworzone podczas uruchamiania createsuperuser.

Zbierz całą zawartość statyczną w jednym folderze, uruchamiając następujące polecenie, które powoduje przeniesienie wszystkich plików statycznych aplikacji do folderu określonego w narzędziu STATIC_ROOT: settings.py

python3 manage.py collectstatic

Prześlij aplikację, uruchamiając następujące polecenie w katalogu aplikacji, w którym znajduje się plik app.yaml:

gcloud app deploy

Poczekaj na wiadomość z informacją, że aktualizacja została zakończona.

W przeglądarce przejdź na stronę https://<your_project_id>.appspot.com

Tym razem żądanie jest obsługiwane przez serwer WWW działający w standardowym środowisku App Engine.

Polecenie app deploy wdraża aplikację w sposób opisany w app.yaml i ustawia nowo wdrożoną wersję jako domyślną, przez co obsługuje cały nowy ruch.

Gdy treści będą gotowe do wyświetlenia w wersji produkcyjnej, zmień zmienną DEBUG na False w narzędziu mysite/settings.py.

Możesz przetestować czatbota w symulatorze albo skorzystać z integracji internetowej lub Google Home utworzonej wcześniej.

Użytkownik: "hi"
Czatbot: "Cześć! Możesz przesłać zdjęcie, aby lepiej poznać punkty orientacyjne."
Użytkownik przesyła obraz.

Pobierz obraz, nadaj mu nazwę demo.jpg i użyj go.

Chatbot: "Plik jest w trakcie przetwarzania, oto wyniki: Golden Gate Bridge,Narodowy most rekreacyjny Golden Gate Gate,Golden Gate Gate,most Golden Gate Bridge,most Golden Gate Gate."

Ogólnie rzecz biorąc, powinien on wyglądać tak:

Jeśli chcesz ukończyć inne ćwiczenia z programowania, pomiń tę sekcję i wróć do niej później.

Usuwanie agenta Dialogflow

Kliknij obok istniejącego agenta.

Przewiń kartę Ogólne w dół i kliknij Usuń tego agenta.
W wyświetlonym oknie wpisz Usuń i kliknij Usuń.

Utworzyłeś czatbota w Dialogflow i zintegrowałeś go z Vision API. Jesteś teraz czatbotem!

Więcej informacji

Aby dowiedzieć się więcej, zobacz przykłady kodu na stronie Dialogflow na GitHubie.