Questa pagina è stata tradotta dall'API Cloud Translation.

Integra l'API Vision con Dialogflow

1. Prima di iniziare

In questo codelab, integrerai l'API Vision con Dialogflow per fornire risposte avanzate e dinamiche basate sul machine learning agli input di immagini fornite dall'utente. Creerai un'app di chatbot che prende 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.

È utile perché ti consente di analizzare gli elementi dell'immagine e intervenire sulle informazioni acquisite. 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 una foto 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, Taj Mahal Garden, Taj Mahal.

Prerequisiti

Prima di procedere, devi completare i seguenti codelab:

Inoltre, devi comprendere i concetti e le costrutti di base di Dialogflow, che puoi scoprire dai seguenti video nel percorso Creare un chatbot con Dialogflow:

Obiettivi didattici

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

Cosa creerai

Crea un agente Dialogflow
Implementare un frontend Django per caricare un file
Implementare il fulfillment 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

2. Panoramica dell'architettura

Creerai una nuova esperienza di conversazione con un frontend Django personalizzato ed effettuerai l'integrazione con l'API Vision. Dovrai creare il frontend con il framework Django, eseguirlo e testarlo localmente, quindi eseguirne il deployment in App Engine. Il frontend sarà simile al seguente:

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

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

Ecco come sarà l'architettura complessiva.

3. Che cos'è l'API Vision?

L'API Vision è un modello ML preaddestrato che ricava insight dalle immagini. Può offrirti vari approfondimenti, tra cui etichettatura delle immagini, rilevamento di volti e punti di riferimento, riconoscimento ottico dei caratteri e tagging di contenuti espliciti. Per scoprire di più, vedi Vision AI.

4. Crea un agente Dialogflow

Vai alla console di Dialogflow.
Accedi. Se sei un nuovo utente, utilizza il tuo indirizzo email per registrarti.
Accetta i Termini e condizioni per accedere alla console.
Fai clic su , scorri fino in fondo e fai clic su Crea nuovo agente.
Inserisci "VisionAPI" come Nome agente.
Fai clic su Crea.

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

L'intenzione di benvenuto predefinita accoglie gli utenti.
L'intent di riserva predefinito intercetta tutte le domande che il tuo bot non comprende.

A questo punto, hai un bot funzionante che accoglie 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 invitare l'utente a caricare l'immagine

Fai clic su Intent di benvenuto predefinito.
Vai a Risposte > Predefinita > Testo o risposta SSML e inserisci "Ciao! Puoi caricare una foto per esplorare i punti di riferimento."

Crea entità

Fai clic su Entità.

Fai clic su Crea entità e denominala "nomefile" e fai clic su Salva.

Crea nuovo intent

Fai clic su Intent > Crea intent.
Inserisci "Esplora l'immagine caricata" nel campo Nome intent.
Fai clic su Frasi di addestramento > Aggiungi frasi di addestramento e inserisci "file is demo.jpg" e "file è taj.jpeg" come espressioni utente con @filename come entità.

Fai clic su Risposte > Aggiungi risposta > Predefinita > Testo o risposta SSML. Inserisci "File in fase di valutazione" e fai clic su Aggiungi risposte.
Fai clic su Fulfillment > Attiva fulfillment e attiva Abilita chiamata webhook per questo intent.

5. Configura il fulfillment per l'integrazione con l'API Vision

Fai clic su Fulfillment.
Attiva l'opzione Editor incorporato.

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

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

Fai clic su Salva.

6. Scarica ed esegui l'app frontend

Clona questo repository sulla tua macchina locale:

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

Passa alla directory che contiene il codice. In alternativa, puoi scaricare l'esempio in formato ZIP ed estrarlo.

cd visionapi-dialogflow

7. Configura il tuo ambiente locale

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 in locale, devi installare e utilizzare una copia locale del proxy Cloud SQL nel tuo ambiente di sviluppo. Per saperne di più, consulta Informazioni sul proxy Cloud SQL.

Per eseguire le attività amministrative 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 viene eseguito in 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

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.
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 visualizzato 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 il connectionName della sezione precedente.

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

Sostituisci [YOUR_INSTANCE_CONNECTION_NAME] con il valore registrato nella sezione precedente. In questo modo viene stabilita una connessione dal computer locale all'istanza Cloud SQL a scopo di test locale. Mantieni il proxy Cloud SQL in esecuzione per tutto il tempo in cui testerai l'app in locale.

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

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

configura le impostazioni del database

Apri mysite/settings-changeme.py per la modifica.
Rinomina il file come setting.py.
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 di App Engine e i test locali.
Alla 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.
Esegui questo comando e copia il valore connectionName restituito per il passaggio successivo.

gcloud sql instances describe [YOUR_INSTANCE_NAME]

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

Chiudi e salva settings.py.

8. Configura account di servizio

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.
Fai clic sul menu di navigazione PUBLISHER > IAM e Amministratore > Account di servizio, quindi fai clic su accanto a Integrazioni di Dialogflow e quindi su Crea chiave.

Sul tuo computer verrà scaricato un file JSON, che ti servirà nelle sezioni di configurazione riportate di seguito.

9. Configura l'endpoint DetectIntent di Dialogflow da chiamare dall'app

Nella cartella della chat, sostituisci key-sample.json con il tuo file JSON delle credenziali e assegnagli il nome key.json.
In views.py nella cartella della chat, sostituisci GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" con il tuo ID progetto.

10. Creazione di bucket di Cloud Storage

Crea un bucket Cloud Storage per gli oggetti statici frontend

Nella console Cloud, fai clic su Vai al menu di navigazione APPS > Spazio di archiviazione.

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

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

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

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

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

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

Crea un bucket Cloud Storage per le immagini caricate dall'utente

Segui le stesse istruzioni per creare un bucket separato in cui caricare le immagini utente. Imposta le autorizzazioni su "allUsers" di nuovo, ma seleziona Creatore oggetti Storage e Visualizzatore oggetti Storage come ruoli.

11. Configura i bucket Cloud Storage nell'app frontend

Configura il bucket Cloud Storage in settings.py

Apri mysite/setting.py.
Individua la variabile GCS_BUCKET e sostituisci ‘<YOUR-GCS-BUCKET-NAME>' con il bucket statico di Cloud Storage.
Individua la variabile GS_MEDIA_BUCKET_NAME e sostituisci ‘<YOUR-GCS-BUCKET-NAME-MEDIA>' con il nome del bucket Cloud Storage per le immagini.
Individua la variabile GS_STATIC_BUCKET_NAME e sostituisci ‘<YOUR-GCS-BUCKET-NAME-STATIC>' con il nome del bucket Cloud Storage per i file statici.
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 dove vuoi salvare il file caricato dall'utente. Ciò 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 recuperare il file ed eseguire la previsione.

12. Crea ed esegui l'app in locale

Per eseguire l'app Django sul tuo computer locale, devi configurare un ambiente di sviluppo Python, inclusi Python, pip e virtualenv. Per le istruzioni, consulta la sezione Configurare un ambiente di sviluppo Python.

Crea un ambiente Python isolato e installa le dipendenze.

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

Esegui le migrazioni di Django per configurare i tuoi modelli.

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

Avvia un server web locale.

python3 manage.py runserver

Nel browser web, vai all'indirizzo http://localhost:8000/. Dovresti vedere una pagina web semplice simile alla seguente:

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

Utilizzare la Console di amministrazione di Django

Creare un super user.

python3 manage.py createsuperuser

Avvia un server web locale.

python3 manage.py runserver

Vai a http://localhost:8000/admin/ nel tuo browser web. Per accedere al sito per amministratori, inserisci il nome utente e la password che hai creato quando hai eseguito createsuperuser.

13. Esegui il deployment dell'app nell'ambiente standard di App Engine

Raccogli tutti i contenuti statici in una cartella eseguendo questo 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 questo 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.

14. Testare l'app frontend

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

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

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

15. Produzione

Quando è tutto pronto per la pubblicazione dei tuoi contenuti in produzione, imposta la variabile DEBUG su False in mysite/settings.py.

16. Testa il chatbot

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

Utente: "ciao"
Chatbot: "Ciao! Puoi caricare una foto per esplorare i punti di riferimento."
L'utente carica un'immagine.

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

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

In generale, dovrebbe avere il seguente aspetto:

17. Esegui la pulizia

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

Elimina l'agente Dialogflow

Fai clic su accanto all'agente esistente.

Nella scheda General (Generale), scorri verso il basso e fai clic su Delete This Agent (Elimina questo agente).
Digita Elimina nella finestra visualizzata e fai clic su Elimina.

18. Complimenti

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ù, dai un'occhiata agli esempi di codice nella pagina GitHub Dialogflow.