Integra l'API Vision con Dialogflow

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

Questo è utile perché puoi analizzare gli elementi nell'immagine e agire in base alle 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: Ciao

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

Utente: carica un'immagine che ritrae il Taj Mahal.

Chatbot: Il file è in fase di elaborazione, ecco i risultati: Taj Mahal, Taj Mahal Garden, Taj Mahal.

Prerequisiti

Prima di procedere, devi completare i seguenti codelab:

1. Creare un pianificatore di 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 comprendere i concetti e le strutture di base di Dialogflow, che puoi apprendere dai seguenti video del percorso Crea un chatbot con Dialogflow:

Obiettivi didattici

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

Cosa creerai

• Crea un agente di Dialogflow
• Implementare un frontend Django per caricare un file
• Implementa l'evasione di Dialogflow per richiamare l'API Vision sull'immagine caricata

Che cosa ti serve

• Conoscenza di base di Python
• Conoscenza di base di Dialogflow
• Una conoscenza di base dell'API Vision

Creerai una nuova esperienza conversazionale con un frontend Django personalizzato e lo estenderai per integrarlo con l'API Vision. Creerai il frontend con il framework Django, lo eseguirai e lo testerai localmente, per poi eseguirne il deployment su App Engine. Il frontend avrà il seguente aspetto:

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

1. L'utente invierà una richiesta tramite il frontend.
2. In questo modo viene attivata una chiamata all'API detectIntent di Dialogflow per mappare l'espressione dell'utente all'intent corretto.
3. Una volta rilevato l'intent di esplorazione del punto di riferimento, il fulfillment di Dialogflow invierà una richiesta all'API Vision, riceverà una risposta e la invierà all'utente.

Ecco come sarà l'architettura complessiva.

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

1. Vai alla console di Dialogflow.
2. Accedi. Se è la prima volta che utilizzi l'app, usa la tua email per registrarti.
3. Accetta i termini e condizioni e potrai accedere alla console.
4. Fai clic su , scorri fino in fondo e fai clic su Crea nuovo agente.

5. Inserisci "VisionAPI" come Nome agente.

5. Fai clic su Crea.

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

1. L'intent di benvenuto predefinito saluta gli utenti.
2. L'intent di riserva predefinito rileva tutte le domande che il bot non comprende.

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

Aggiorna l'intent di benvenuto predefinito per notificare all'utente di caricare l'immagine

1. Fai clic su Intent di benvenuto predefinito.
2. Vai a Risposte > Predefinita > 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à.

2. Fai clic su Crea entità, assegnale il nome "filename" e fai clic su Salva.

Crea nuovo intent

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

4. Fai clic su Risposte > Aggiungi risposta > Predefinita > Risposta di testo o SSML. Inserisci "Valutazione del file" e fai clic su Aggiungi risposte.

5. Fai clic su Fulfillment > Abilita fulfillment e attiva Abilita chiamata webhook per questo intent.

1. Fai clic su Evasione.
2. Attiva Editor incorporato.

3. Aggiorna index.js con il codice seguente e aggiorna YOUR-BUCKET-NAME con il nome del tuo 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 [];
    }
}

4. Incolla quanto segue 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"
  }
}

5. Fai clic su Salva .

1. Clona questo repository sulla tua macchina locale:

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

2. Passa alla directory che contiene il codice. In alternativa, puoi scaricare il campione come file zip ed estrarlo.

cd visionapi-dialogflow

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

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

Nota: devi autenticarti con lo strumento a riga di comando gcloud per utilizzare il proxy per connetterti dalla tua macchina locale

Installa il proxy Cloud SQL

Scarica e installa il proxy Cloud SQL con il seguente comando. Il proxy Cloud SQL viene utilizzato per connettersi all'istanza Cloud SQL durante l'esecuzione locale.

Scarica il proxy:

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

Rendi eseguibile il proxy.

chmod +x cloud_sql_proxy

Crea un'istanza Cloud SQL

1. Crea un'istanza Cloud SQL per l'istanza MySQL di seconda generazione Inserisci "polls-instance" o un nome simile. Potrebbero essere necessari alcuni minuti prima che l'istanza sia pronta. Una volta pronto, dovrebbe essere visibile nell'elenco delle istanze.
2. Ora utilizza lo strumento a riga di comando gcloud per eseguire il seguente comando, dove [YOUR_INSTANCE_NAME] rappresenta il nome della tua istanza Cloud SQL. Prendi nota del valore mostrato per connectionName per il passaggio successivo. Viene visualizzato nel formato [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME].

gcloud sql instances describe [YOUR_INSTANCE_NAME]

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

Inizializza l'istanza Cloud SQL

Avvia il proxy Cloud SQL utilizzando connectionName della 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. In questo modo viene stabilita una connessione dal computer locale all'istanza Cloud SQL a scopo di test locale. Mantieni in esecuzione Cloud SQL Proxy per tutto il tempo in cui testi l'app in locale.

Poi, crea un nuovo utente e un nuovo database Cloud SQL.

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

Configurare le impostazioni del database

1. Apri mysite/settings-changeme.py per la modifica.
2. Rinomina il file in 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. In questo modo viene configurata la connessione al database per il deployment di App Engine e i test locali.
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]

6. Sostituisci [YOUR-CONNECTION-NAME] con il valore che hai registrato nel passaggio precedente.
7. 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]

8. 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 la console Cloud.
2. Fai clic su Menu di navigazione ☰ > IAM e amministrazione > Service account, quindi fai clic su accanto a Integrazioni di Dialogflow e fai clic su Crea chiave.

3. Sul computer verrà scaricato un file JSON, che ti servirà nelle sezioni di configurazione successive.

1. Nella cartella della chat, sostituisci key-sample.json con il file JSON delle credenziali e chiamalo key.json.
2. In views.py nella cartella della chat, modifica GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" con l'ID progetto.

Crea un bucket Cloud Storage per gli oggetti statici frontend

1. Nella console Cloud, fai clic su Naviga menu di navigazione ☰ > Storage.

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

4. Scegli dove archiviare i tuoi dati. Scegli Regione e seleziona la località più adatta alle tue esigenze.
5. Scegli Standard come classe di archiviazione predefinita.

6. Scegli Imposta in maniera uniforme le autorizzazioni a livello di bucket (solo criterio bucket), poi fai clic su Continua per creare il bucket.

7. Una volta creato il bucket, fai clic su Menu di navigazione ☰ > Storage > Browser e individua il bucket che hai creato.

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

9. Fai clic su Aggiungi membri,fai clic su Nuovi membri, inserisci "allUsers," poi fai clic su Seleziona un ruolo > Visualizzatore oggetti Storage. che fornisce l'accesso in visualizzazione ai file frontend statici a allUsers. Non è un'impostazione di sicurezza ideale per i file, ma funziona ai fini di questo codelab specifico.

Crea 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 di nuovo le autorizzazioni su "allUsers", ma seleziona Storage Object Creator e Storage Object Viewer come ruoli.

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 tuo bucket Cloud Storage per le immagini.
4. Individua la variabile GS_STATIC_BUCKET_NAME e sostituisci ‘<YOUR-GCS-BUCKET-NAME-STATIC>' con il nome del tuo bucket Cloud Storage per i 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. In questo modo, non puoi archiviare il file caricato dall'utente nel frontend e conservare gli asset statici nel bucket Cloud Storage. L'API Vision chiama il bucket Cloud Storage per recuperare il file ed effettuare la previsione.

Per eseguire l'app Django sul computer locale, devi configurare un ambiente di sviluppo Python, inclusi Python, pip e virtualenv. Per istruzioni, consulta 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

2. Esegui le migrazioni Django per configurare i modelli.

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

3. Avvia un server web locale.

python3 manage.py runserver

4. Nel browser web, vai all'indirizzo http://localhost:8000/. Dovresti visualizzare una pagina web semplice simile a questa:

Le pagine dell'app di esempio vengono fornite dal server web Django in esecuzione sul computer. Quando è tutto pronto per procedere, premi Control+C (Command+C su Macintosh) per arrestare il server web locale.

Utilizzare la console di amministrazione di Django

1. Crea un superuser.

python3 manage.py createsuperuser

2. Avvia un server web locale.

python3 manage.py runserver

3. Vai alla pagina http://localhost:8000/admin/ nel 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 seguente comando, 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 il seguente comando dalla directory dell'app in cui si trova il file app.yaml:

gcloud app deploy

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

Nel browser web, vai alla pagina https://<your_project_id>.appspot.com

Questa volta, la tua richiesta viene gestita da un web server 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 versione appena sottoposta a deployment come versione predefinita, in modo che gestisca tutto il nuovo traffico.

Quando è tutto pronto per pubblicare i contenuti in produzione, modifica la variabile DEBUG in False in mysite/settings.py.

Puoi testare il chatbot nel simulatore o 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, chiamala demo.jpg e utilizzala.

4. Chatbot: "Il file è in fase di elaborazione, ecco i risultati: Golden Gate Bridge,Golden Gate National Recreation Area,Golden Gate Bridge,Golden Gate Bridge,Golden Gate Bridge".

Nel complesso, dovrebbe avere questo aspetto:

Se vuoi completare altri codelab di Dialogflow, salta questa sezione e torna a consultarla in un secondo momento.

Elimina l'agente Dialogflow

1. Fai clic su accanto all'agente esistente.

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

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

Scopri di più

Per saperne di più, consulta gli esempi di codice nella pagina GitHub di Dialogflow.