Integra l'API Vision con Dialogflow

In questo codelab, integrerai l'API Vision con Dialogflow per fornire risposte avanzate e dinamiche basate su machine learning agli input di immagini forniti dall'utente. Creerai un'app di chatbot che acquisisce un'immagine come input, la elabora nell'API Vision e restituisce un punto di riferimento identificato all'utente. Ad esempio, se l'utente carica un'immagine del Taj Mahal, il chatbot restituirà il Taj Mahal come risposta.

Ciò è utile perché puoi eseguire un'analisi degli elementi nell'immagine e intervenire sulle informazioni ottenute. Puoi anche creare un sistema di elaborazione dei rimborsi per aiutare gli utenti a caricare le ricevute, estrarre la data di acquisto nella ricevuta ed elaborare il rimborso se la data è appropriata.

Dai un'occhiata alla seguente finestra di dialogo di esempio:

Utente: Buongiorno

Chatbot: Ciao! Puoi caricare un'immagine per esplorare i punti di riferimento

Utente: carica un'immagine contenente il Taj Mahal.

Chatbot: Il file è in fase di elaborazione. Ecco i risultati: Taj Mahal, Giardino di Taj Mahal, Taj Mahal.

Prerequisiti

Prima di procedere, devi completare i seguenti codelab:

  1. Crea un programma degli appuntamenti con Dialogflow
  2. Integrare un chatbot Dialogflow con Actions on Google
  3. Informazioni sulle entità in Dialogflow
  4. Crea un client Django frontend per un'app Dialogflow

Devi anche conoscere i concetti e i costrutti di base di Dialogflow, che puoi trarre dai seguenti video nel percorso Creare un chatbot con Dialogflow:

Obiettivi didattici

  • Come creare un agente Dialogflow
  • Come aggiornare un agente Dialogflow per caricare i file
  • Come configurare la connessione all'API Vision con il fulfillment di Dialogflow
  • Come configurare ed eseguire un'app frontend Django per Dialogflow
  • Come eseguire il deployment dell'app frontend Django in Google Cloud su App Engine
  • Come testare l'app Dialogflow da un frontend personalizzato

Cosa devi creare

  • Crea un agente Dialogflow
  • Implementare un frontend Django per caricare un file
  • Implementare il fulfillment di Dialogflow per richiamare l'API Vision rispetto all'immagine caricata

Che cosa ti serve

  • Una conoscenza di base di Python
  • Nozioni di base su Dialogflow
  • Una conoscenza di base dell'API Vision

Dovrai creare una nuova esperienza di conversazione con un frontend Django personalizzato e estenderla all'API Vision. Dovrai creare il frontend con il framework Django, eseguirlo e testarlo localmente, quindi eseguirne il deployment in App Engine. Il frontend avrà il seguente aspetto:

Il flusso di richiesta funzionerà come illustrato nell'immagine seguente:

  1. L'utente invierà una richiesta tramite il frontend.
  2. Questo attiverà una chiamata all'API Dialogflow Intent per mappare l'espressione dell'utente all'intent giusto.
  3. Una volta rilevato l'intent di riferimento, il fulfillment di Dialogflow invierà una richiesta all'API Vision, riceverà una risposta e la invierà all'utente.

Ecco l'aspetto generale dell'architettura.

L'API Vision è un modello di machine learning preaddestrato che ricava insight dalle immagini. Fornisce più informazioni, tra cui etichettatura delle immagini, rilevamento di volti e punti di riferimento, riconoscimento ottico dei caratteri e codifica di contenuti espliciti. Per ulteriori informazioni, consulta Vision AI.

  1. Vai alla console di Dialogflow.
  2. Accedi. Se sei un nuovo utente, utilizza il tuo indirizzo email per registrarti.
  3. Accetta i termini e le condizioni per visualizzare la console.
  4. Fai clic su , scorri fino in fondo e fai clic su Crea nuovo agente.

5. Inserisci "VisionAPI" come Nome agente.

  1. Fai clic su Crea.

Dialogflow crea i seguenti due intent predefiniti come parte dell'agente:

  1. L'intent di benvenuto predefinito viene accolto i tuoi utenti.
  2. L'intent di riserva predefinito rileva tutte le domande che il bot non comprende.

A questo punto, hai un bot funzionale che saluta gli utenti, ma devi aggiornarlo per far sapere agli utenti che possono caricare un'immagine per esplorare i punti di riferimento.

Aggiorna l'intent di benvenuto predefinito per informare l'utente del caricamento dell'immagine

  1. Fai clic su Intent di benvenuto predefinito.
  2. Vai a Responses (Risposte) > Default (Predefinito) > Text or SSML Response (Risposta di testo o SSML) e inserisci "Hi! Puoi caricare un'immagine per esplorare i punti di riferimento."

Crea entità

  1. Fai clic su Entità.

  1. Fai clic su Crea entità, denominala "nome file" e fai clic su Salva.

Crea nuovo intent

  1. Fai clic su Intent > Create Intent (Crea intent).
  2. Inserisci "Esplora immagine" come Nome intent.
  3. Fai clic su Frasi di addestramento > Aggiungi frasi di addestramento e inserisci "file" come demo.jpg" e "file è taj.jpeg" come espressioni utente con @filename come entità.

  1. Fai clic su Risposte > Aggiungi risposta > predefinita > Testo o risposta SSML. Inserisci "Valutazione file" e fai clic su Aggiungi risposte.
  1. Fai clic su Fulfillment > Abilita fulfillment e attiva Attiva la chiamata webhook per questo intent.

  1. Fai clic su Fulfillment.
  2. Attiva l'opzione Editor in linea.

  1. Aggiorna il index.js con il codice seguente e aggiorna YOUR-BUCKET-NAME con il nome del bucket 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 [];
    }
}
  1. Incolla il codice seguente in package.json per sostituirne i contenuti.
{
  "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"
  }
}
  1. Fai clic su Salva.
  1. Clona il repository sulla tua macchina locale:
https://github.com/priyankavergadia/visionapi-dialogflow.git
  1. Passa alla directory che contiene il codice. In alternativa, puoi scaricare l'anteprima come file ZIP ed estrarla.
cd visionapi-dialogflow

Una volta eseguito il deployment, l'applicazione utilizza il proxy Cloud SQL integrato nell'ambiente standard di App Engine per comunicare con l'istanza Cloud SQL. Tuttavia, per testare la tua app localmente, devi installare e utilizzare una copia locale del proxy Cloud SQL nel tuo ambiente di sviluppo. Per saperne di più, vedi Informazioni sul proxy Cloud SQL.

Per eseguire le attività di amministrazione di base sull'istanza Cloud SQL, puoi utilizzare il client Cloud SQL per MySQL.

Installa il proxy Cloud SQL

Scarica e installa il proxy Cloud SQL con il comando seguente. Il proxy Cloud SQL viene utilizzato per connettersi all'istanza Cloud SQL quando è in esecuzione localmente.

Scarica il proxy:

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

Rendi il proxy eseguibile.

chmod +x cloud_sql_proxy

crea un'istanza di Cloud SQL

  1. Crea un'istanza Cloud SQL per l'istanza MySQL di seconda generazione Inserisci "polls-instance" o simile. La preparazione dell'istanza potrebbe richiedere qualche minuto. Una volta pronta, dovrebbe essere visibile nell'elenco delle istanze.
  2. Ora utilizza lo strumento a riga di comando gcloud per eseguire il comando seguente, dove [YOUR_INSTANCE_NAME] rappresenta il nome della tua istanza Cloud SQL. Prendi nota del valore visualizzato per connectionName per il passaggio successivo. Il formato è [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME].
gcloud sql instances describe [YOUR_INSTANCE_NAME]

In alternativa, puoi fare clic sull'istanza nella console per visualizzare il Nome connessione istanza.

Inizializza l'istanza Cloud SQL

Avvia il proxy Cloud SQL utilizzando connectionName dalla sezione precedente.

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

Sostituisci [YOUR_INSTANCE_CONNECTION_NAME] con il valore che hai registrato nella sezione precedente. Questo stabilisce una connessione dal computer locale all'istanza Cloud SQL per eseguire test locali. Mantieni il proxy Cloud SQL in esecuzione per tutto il tempo in cui test l'app localmente.

Quindi, crea un nuovo utente e database Cloud SQL.

  1. Crea un nuovo database con Google Cloud Console per la tua istanza Cloud SQL, denominata polls-instance. Ad esempio, puoi inserire"polls"come nome.
  2. Crea un nuovo utente utilizzando Cloud Console per la tua istanza Cloud SQL, denominata polls-instance.

Configura le impostazioni del database

  1. Apri mysite/settings-changeme.py per modificare.
  2. Rinomina il file come setting.py.
  3. In due punti, sostituisci [YOUR-USERNAME] e [YOUR-PASSWORD] con il nome utente e la password del database che hai creato nella sezione precedente. Ciò consente di configurare la connessione al database per il deployment e i test locali di App Engine.
  4. Nella riga ‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]' sostituisci [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] con il nome dell'istanza acquisito nella sezione precedente.
  5. Esegui il comando seguente e copia il valore connectionName restituito per il passaggio successivo.
gcloud sql instances describe [YOUR_INSTANCE_NAME]
  1. Sostituisci [YOUR-CONNECTION-NAME] con il valore registrato nel passaggio precedente
  2. Sostituisci [YOUR-DATABASE] con il nome che hai scelto nella sezione precedente.
# [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]
  1. Chiudi e salva settings.py.
  1. Nella console di Dialogflow, fai clic su . Nella scheda Generale, vai a Progetto Google> ID progetto e fai clic su Google Cloud per aprire Cloud Console.
  2. Fai clic sul Menu di navigazione ☰ > IAM &Amministratore > Account di servizio, quindi fai clic su accanto a Integrazioni di Dialogflow e fai clic su Crea chiave.

  1. Il file JSON verrà scaricato sul computer e ti servirà nelle seguenti sezioni di configurazione.
  1. Nella cartella della chat, sostituisci key-sample.json con il file JSON delle credenziali e denominalo key.json.
  2. In views.py nella cartella della chat, cambia GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" nell'ID progetto.

Creare un bucket Cloud Storage per gli oggetti statici frontend

  1. In Cloud Console, fai clic su Naviga nel menu di navigazione ☰> Spazio di archiviazione.

  1. Fai clic su Crea bucket.
  2. Fornisci un nome globalmente univoco.

  1. Scegli dove archiviare i tuoi dati. Scegli Area geografica e scegli la località più adatta alle tue esigenze.
  2. Scegli Standard come classe di archiviazione predefinita.

  1. Scegli Imposta le autorizzazioni in modo uniforme a livello di bucket (solo criterio bucket), quindi fai clic su Continua per creare il bucket.

  1. Una volta creato il bucket, fai clic sul Menu di navigazione ☰ > Spazio di archiviazione> Browser e individua il bucket che hai creato.

  1. Fai clic su accanto al bucket corrispondente e poi su Modifica autorizzazioni bucket.

  1. Fai clic su Aggiungi membri, quindi su Nuovi membri e inserisci "allUsers", quindi seleziona un ruolo > Visualizzatore oggetti Storage. Ciò fornisce l'accesso in visualizzazione ai file di frontend statici per allUsers. Questa non è un'impostazione di sicurezza ideale per i file, ma funziona ai fini di questo particolare codelab.

Creare un bucket Cloud Storage per le immagini caricate dagli utenti

Segui le stesse istruzioni per creare un bucket separato per caricare le immagini degli utenti. Imposta nuovamente le autorizzazioni su "allUsers", ma seleziona i ruoli come Creatore oggetti Storage e Visualizzatore oggetti Storage.

Configura il bucket Cloud Storage in settings.py

  1. Apri mysite/setting.py.
  2. Individua la variabile GCS_BUCKET e sostituisci ‘<YOUR-GCS-BUCKET-NAME>' con il tuo bucket statico Cloud Storage.
  3. Individua la variabile GS_MEDIA_BUCKET_NAME e sostituisci ‘<YOUR-GCS-BUCKET-NAME-MEDIA>' con il nome del bucket Cloud Storage delle immagini.
  4. Individua la variabile GS_STATIC_BUCKET_NAME e sostituisci ‘<YOUR-GCS-BUCKET-NAME-STATIC>' con il nome del bucket Cloud Storage dei file statici.
  5. Salva il file.
GCS_BUCKET = '<YOUR-GCS-BUCKET-NAME>'
GS_MEDIA_BUCKET_NAME = '<YOUR-GCS-BUCKET-NAME-MEDIA>'
GS_STATIC_BUCKET_NAME = '<YOUR-GCS-BUCKET-NAME-STATIC>'

Configura il bucket Cloud Storage in home.html

  • Apri la cartella della chat, quindi apri templates e rinomina home-changeme.html in home.html.
  • Cerca <YOUR-GCS-BUCKET-NAME-MEDIA> e sostituiscilo con il nome del bucket in cui vuoi salvare il file caricato dall'utente. Questo ti impedisce di archiviare il file caricato dall'utente nel frontend e di mantenere gli asset statici nel bucket Cloud Storage. L'API Vision chiama il bucket Cloud Storage per prelevare il file ed effettuare la previsione.

Per eseguire l'app Django sul tuo computer locale, devi configurare un ambiente di sviluppo Python, inclusi Python, pip e virtualenv. Per istruzioni, consulta l'articolo sulla configurazione di un ambiente di sviluppo Python.

  1. Crea un ambiente Python isolato e installa le dipendenze.
virtualenv env
source env/bin/activate
pip install -r requirements.txt
  1. Esegui le migrazioni Django per configurare i modelli.
python3 manage.py makemigrations
python3 manage.py makemigrations polls
python3 manage.py migrate
  1. Avvia un server web locale.
python3 manage.py runserver
  1. Nel browser web, vai alla pagina http://localhost:8000/. Dovresti vedere una semplice pagina web simile alla seguente:

Le pagine dell'app di esempio vengono pubblicate dal server web di Django in esecuzione sul computer. Quando vuoi iniziare, premi Control+C (Command+C su Macintosh) per interrompere il server web locale.

Utilizzare la Console di amministrazione Django

  1. Crea un super user.
python3 manage.py createsuperuser
  1. Avvia un server web locale.
python3 manage.py runserver
  1. Vai a http://localhost:8000/admin/ nel tuo browser web. Per accedere al sito di amministrazione, inserisci il nome utente e la password che hai creato quando hai eseguito createsuperuser.

Raccogli tutti i contenuti statici in una cartella eseguendo il comando seguente, che sposta tutti i file statici dell'app nella cartella specificata da STATIC_ROOT in settings.py:

python3 manage.py collectstatic

Carica l'app eseguendo questo comando dalla directory dell'app in cui si trova il file app.yaml:

gcloud app deploy

Attendi il messaggio che ti comunica che l'aggiornamento è stato completato.

Nel browser web, vai all'indirizzo https://<your_project_id>.spotspot.com.

Questa volta, la tua richiesta viene gestita da un server web in esecuzione nell'ambiente standard di App Engine.

Il comando app deploy esegue il deployment dell'app come descritto in app.yaml e imposta la nuova versione di cui è stato eseguito il deployment come versione predefinita, consentendo di gestire tutto il nuovo traffico.

Quando vorrai pubblicare i tuoi contenuti in produzione, modifica la variabile DEBUG in False in mysite/settings.py.

Puoi testare il tuo botbot nel simulatore oppure utilizzare l'integrazione web o Google Home che hai creato in precedenza.

  1. Utente: "hi"
  2. Chatbot: &Ciao! Puoi caricare un'immagine per esplorare i punti di riferimento."
  3. L'utente carica un'immagine.

Scarica questa immagine, assegnale il nome demo.jpg e utilizzala.

  1. Chatbot: "Impossibile elaborare il file, ecco i risultati: Golden Gate Bridge,Golden Gate National Recreation Area,Golden Gate Bridge,Golden Gate Bridge,Golden Gate Bridge."

Nel complesso, dovrebbe essere simile a questa:

Se vuoi completare altri codelab di Dialogflow, salta questa sezione e torna più tardi.

Eliminare l'agente Dialogflow

  1. Fai clic su accanto all'agente esistente.

  1. Nella scheda Generali, scorri verso il basso e fai clic su Elimina questo agente.
  2. Digita Elimina nella finestra visualizzata e fai clic su Elimina.

Hai creato un chatbot in Dialogflow e lo hai integrato con l'API Vision. Sei diventato uno sviluppatore di chatbot.

Scopri di più

Per saperne di più, controlla gli esempi di codice nella pagina Dialoghub Github.