Cette page a été traduite par l'API Cloud Translation.

Intégrer l'API Vision à Dialogflow

1. Avant de commencer

Dans cet atelier de programmation, vous allez intégrer l'API Vision à Dialogflow pour fournir des réponses riches et dynamiques basées sur le machine learning aux entrées d'images fournies par l'utilisateur. Vous allez créer une application de chatbot qui reçoit une image en entrée, la traite dans l'API Vision et renvoie un point de repère identifié à l'utilisateur. Par exemple, si l'utilisateur importe une image du Taj Mahal, le chatbot renvoie le Taj Mahal comme réponse.

Cette fonctionnalité est très utile, car elle vous permet d'analyser les éléments présents sur l'image et de prendre des mesures en fonction des informations ainsi obtenues. Vous pouvez également mettre en place un système de traitement des remboursements pour aider les utilisateurs à importer des reçus, à extraire la date d'achat sur le reçu et à traiter le remboursement le cas échéant.

Examinez l'exemple de boîte de dialogue suivant:

Utilisateur: Bonjour

Chatbot: Bonjour ! Vous pouvez importer une photo pour explorer des monuments

Utilisateur: Importez une image montrant le Taj Mahal.

Chatbot: Le fichier est en cours de traitement. Voici les résultats: Taj Mahal, Taj Mahal Garden, Taj Mahal.

Prérequis

Avant de continuer, vous devez suivre les ateliers de programmation suivants:

Vous devez également comprendre les concepts et les constructions de base de Dialogflow, que vous pouvez glaner dans les vidéos suivantes du parcours Créer un chatbot avec Dialogflow:

Points abordés

Créer un agent Dialogflow
Mettre à jour un agent Dialogflow pour importer des fichiers
Configurer la connexion à l'API Vision avec le fulfillment Dialogflow
Configurer et exécuter une application d'interface Django pour Dialogflow
Déployer l'application d'interface Django dans Google Cloud sur App Engine
Tester l'application Dialogflow à partir d'une interface personnalisée

Ce que vous allez faire

Créer un agent Dialogflow
Implémenter une interface Django pour importer un fichier
Implémenter un fulfillment Dialogflow pour appeler l'API Vision sur l'image importée

Prérequis

Connaissances de base de Python
Connaissances de base de Dialogflow
Connaissances de base de l'API Vision

2. Présentation de l'architecture

Vous allez créer une expérience de conversation avec une interface Django personnalisée et l'étendre pour l'intégrer à l'API Vision. Vous allez créer l'interface avec l'environnement logiciel Django, l'exécuter et la tester localement, puis la déployer sur App Engine. L'interface se présente comme suit:

Le flux de requêtes fonctionnera comme ceci, comme illustré dans l'image suivante:

L'utilisateur envoie une requête via l'interface.
Cette opération déclenche un appel à l'API Dialogflow DetectIntent pour mapper l'énoncé de l'utilisateur avec l'intent approprié.
Une fois l'intent de point de repère d'exploration détecté, le fulfillment Dialogflow envoie une requête à l'API Vision, reçoit une réponse et l'envoie à l'utilisateur.

Voici à quoi ressemblera l'architecture globale.

3. Qu'est-ce que l'API Vision ?

L'API Vision est un modèle de ML pré-entraîné qui dégage des insights à partir d'images. Il peut vous fournir de nombreuses informations, y compris l'étiquetage d'images, la détection de visages et de points de repère, la reconnaissance optique des caractères et l'ajout de tags au contenu explicite. Pour en savoir plus, consultez Vision AI.

4. Créer un agent Dialogflow

Accédez à la console Dialogflow.
Connectez-vous. (Si vous êtes un nouvel utilisateur, utilisez votre adresse e-mail pour vous inscrire.)
Acceptez les conditions d'utilisation pour accéder à la console.
Cliquez sur , faites défiler la page jusqu'en bas, puis cliquez sur Create new agent (Créer un agent).
Entrez "VisionAPI" dans le champ Agent name (Nom de l'agent).
Cliquez sur Créer.

Dialogflow crée les deux intents par défaut suivants dans l'agent:

L'intent d'accueil par défaut accueille vos utilisateurs.
L'intent de remplacement par défaut capture toutes les questions que votre bot ne comprend pas.

À ce stade, vous disposez d'un bot fonctionnel qui accueille les utilisateurs, mais vous devez le mettre à jour pour indiquer aux utilisateurs qu'ils peuvent importer une image pour explorer des points de repère.

Modifier l'intent d'accueil par défaut pour demander à l'utilisateur d'importer une image

Cliquez sur Default Welcome Intent (Intent d'accueil par défaut).
Accédez à Réponses > Par défaut > Texte ou réponse SSML, puis saisissez "Hi! Vous pouvez importer une photo pour explorer des monuments."

Créer une entité

Cliquez sur Entities (Entités).

Cliquez sur Créer une entité, nommez-la "nom de fichier". et cliquez sur Enregistrer.

Créer un intent

Cliquez sur Intents > Créer un intent.
Saisissez "Explorer l'image importée" dans le champ Intent name (Nom de l'intent).
Cliquez sur Training phrases (Phrases d'entraînement) > Ajoutez des phrases d'entraînement et saisissez "le fichier est demo.jpg" et "fichier est taj.jpeg" en tant qu'expressions utilisateur avec @filename comme entité.

Cliquez sur Réponses > Ajouter une réponse > Par défaut > Texte ou réponse SSML. Saisissez "Assessing file" (Évaluation du fichier). et cliquez sur Add Responses (Ajouter des réponses).
Cliquez sur Fulfillment > Enable fulfillment (Activer le fulfillment) et cochez Enable webhook call for this intent (Activer l'appel webhook pour cet intent).

5. Configurer le fulfillment pour l'intégration à l'API Vision

Cliquez sur Fulfillment.
Activez l'éditeur intégré.

Mettez à jour index.js avec le code suivant et remplacez YOUR-BUCKET-NAME par le nom de votre 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 [];
    }
}

Collez le code suivant dans package.json pour remplacer son contenu.

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

Cliquez sur Enregistrer.

6. Télécharger et exécuter l'application d'interface

Clonez ce dépôt sur votre ordinateur local:

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

Accédez au répertoire qui contient le code. Vous pouvez également télécharger l'exemple sous forme de fichier ZIP et l'extraire.

cd visionapi-dialogflow

7. Configurer votre environnement local

Une fois déployée, votre application communique avec votre instance Cloud SQL à l'aide du proxy Cloud SQL intégré à l'environnement standard App Engine. Toutefois, pour tester votre application en local, vous devez installer et utiliser une copie locale du proxy Cloud SQL dans votre environnement de développement. Pour en savoir plus, consultez À propos du proxy Cloud SQL.

Pour effectuer des tâches administratives de base sur votre instance Cloud SQL, vous pouvez utiliser le client Cloud SQL pour MySQL.

Installer le proxy Cloud SQL

Téléchargez et installez le proxy Cloud SQL à l'aide de la commande suivante. Le proxy Cloud SQL vous permet de vous connecter à votre instance Cloud SQL lorsque vous l'exécutez en local.

Téléchargez le proxy :

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

Rendez le proxy exécutable.

chmod +x cloud_sql_proxy

Créer une instance Cloud SQL

Créez une instance Cloud SQL pour MySQL de deuxième génération. Saisissez "polls-instance" ou un nom similaire. La préparation de l'instance peut prendre quelques minutes. Une fois prêt, l'instance devrait apparaître dans la liste des instances.
Utilisez maintenant l'outil de ligne de commande gcloud pour exécuter la commande suivante, en remplaçant [YOUR_INSTANCE_NAME] par le nom de votre instance Cloud SQL. Notez la valeur affichée pour connectionName pour l'étape suivante. Il s'affiche au format [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME].

gcloud sql instances describe [YOUR_INSTANCE_NAME]

Vous pouvez également cliquer sur l'instance dans la console pour obtenir le Nom de connexion de l'instance.

Initialiser votre instance Cloud SQL

Démarrez le proxy Cloud SQL à l'aide du connectionName de la section précédente.

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

Remplacez [YOUR_INSTANCE_CONNECTION_NAME] par la valeur que vous avez enregistrée dans la section précédente. Cela permet d'établir une connexion entre votre ordinateur local et votre instance Cloud SQL à des fins de test. N'arrêtez pas le proxy Cloud SQL lors du test local de votre application.

Créez ensuite un utilisateur et une base de données Cloud SQL.

Créez une base de données nommée polls-instance dans la console Google Cloud pour votre instance Cloud SQL. Par exemple, vous pouvez saisir "sondages" comme nom.
Créez un utilisateur nommé polls-instance à l'aide de la console Cloud pour votre instance Cloud SQL.

Configurer les paramètres de base de données

Ouvrez mysite/settings-changeme.py pour y apporter des modifications.
Renommez le fichier setting.py.
À deux endroits, remplacez [YOUR-USERNAME] et [YOUR-PASSWORD] par le nom d'utilisateur et le mot de passe de la base de données que vous avez créés à la section précédente. Cela permet de configurer la connexion à la base de données pour le déploiement d'App Engine et les tests en local.
À la ligne ‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]' remplacez [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] par le nom de l'instance acquise à la section précédente.
Exécutez la commande suivante et copiez la valeur connectionName générée pour l'étape suivante.

gcloud sql instances describe [YOUR_INSTANCE_NAME]

Remplacez [YOUR-CONNECTION-NAME] par la valeur que vous avez enregistrée à l'étape précédente.
Remplacez [YOUR-DATABASE] par le nom que vous avez choisi dans la section précédente.

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

Enregistrez et fermez le fichier settings.py.

8. Configurer un compte de service

Dans la console Dialogflow, cliquez sur . Dans l'onglet General (Général), accédez à Google Project (Projet Google) > ID du projet, puis cliquez sur Google Cloud pour ouvrir la console Cloud.
Cliquez sur le menu de navigation ▾ > IAM et Admin > Comptes de service, puis cliquez sur à côté de Intégrations Dialogflow, puis sur Créer une clé.

Un fichier JSON est téléchargé sur votre ordinateur. Vous en aurez besoin dans les sections de configuration suivantes.

9. Configurer le point de terminaison Dialogflow DetectIntent à appeler depuis l'application

Dans le dossier "chat", remplacez key-sample.json par votre fichier JSON d'identifiants et nommez-le key.json.
Dans le fichier views.py du dossier de chat, remplacez GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" par l'ID de votre projet.

10. Créer des buckets Cloud Storage

Créer un bucket Cloud Storage pour les objets statiques d'interface

Dans la console Cloud, cliquez sur le menu de navigation événements > Stockage :

Cliquez sur Créer un bucket.
Indiquez un nom unique.

Choisissez où stocker vos données. Choisissez Région, puis sélectionnez l'emplacement qui correspond le mieux à vos besoins.
Choisissez Standard comme classe de stockage par défaut.

Choisissez Définir les autorisations de manière uniforme au niveau du bucket (Stratégie du bucket seulement), puis cliquez sur Continuer pour créer le bucket.

Une fois le bucket créé, cliquez sur le menu de navigation ▾ > Stockage > Navigateur et localisez le bucket que vous avez créé.

Cliquez sur à côté du bucket correspondant, puis sur Modifier les autorisations relatives au bucket.

Cliquez sur Ajouter des membres, puis sur Nouveaux membres et saisissez "allUsers", Cliquez sur Sélectionner un rôle > Lecteur des objets Storage. Cela permet d'accéder aux fichiers d'interface statiques pour allUsers. Ce paramètre de sécurité n'est pas idéal pour les fichiers, mais il fonctionne dans cet atelier de programmation particulier.

Créer un bucket Cloud Storage pour les images importées par les utilisateurs

Suivez les mêmes instructions pour créer un bucket distinct afin d'importer les images d'utilisateurs. Définir les autorisations sur "allUsers" mais sélectionnez les rôles Storage Object Creator et Storage Object Viewer.

11. Configurer les buckets Cloud Storage dans l'application d'interface

Configurer le bucket Cloud Storage dans le fichier settings.py

Ouvrez mysite/setting.py.
Recherchez la variable GCS_BUCKET et remplacez ‘<YOUR-GCS-BUCKET-NAME>. avec votre bucket Cloud Storage statique.
Recherchez la variable GS_MEDIA_BUCKET_NAME et remplacez ‘<YOUR-GCS-BUCKET-NAME-MEDIA>' par le nom de votre bucket Cloud Storage pour les images.
Recherchez la variable GS_STATIC_BUCKET_NAME et remplacez ‘<YOUR-GCS-BUCKET-NAME-STATIC>' par le nom de votre bucket Cloud Storage pour les fichiers statiques.
Enregistrez le fichier.

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

Configurer un bucket Cloud Storage dans home.html

Ouvrez le dossier de chat, puis ouvrez templates et renommez home-changeme.html en home.html.
Recherchez <YOUR-GCS-BUCKET-NAME-MEDIA> et remplacez-le par le nom de votre bucket pour l'emplacement où vous souhaitez enregistrer le fichier importé par l'utilisateur. Cela vous empêche de stocker le fichier importé par l'utilisateur dans l'interface et de conserver les éléments statiques dans le bucket Cloud Storage. L'API Vision appelle le bucket Cloud Storage pour récupérer le fichier et effectuer la prédiction.

12. Créer et exécuter l'application en local

Pour exécuter l'application Django sur votre ordinateur local, vous devez configurer un environnement de développement Python incluant Python, pip et virtualenv. Pour obtenir des instructions, consultez la page Configurer un environnement de développement Python.

Créez un environnement Python isolé et installez des dépendances.

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

Exécutez les migrations Django pour configurer vos modèles.

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

Démarrez un serveur Web local :

python3 manage.py runserver

Dans votre navigateur Web, accédez à http://localhost:8000/. Une page Web simple semblable à celle-ci doit s'afficher :

Les pages de l'exemple d'application sont fournies par le serveur Web Django exécuté sur votre ordinateur. Lorsque vous êtes prêt à poursuivre, appuyez sur Control+C (Command+C sur Macintosh) pour arrêter le serveur Web local.

Utiliser la console d'administration Django

Créez un super-utilisateur.

python3 manage.py createsuperuser

Démarrez un serveur Web local :

python3 manage.py runserver

Accédez à http://localhost:8000/admin/ dans votre navigateur Web. Pour vous connecter au site d'administration, saisissez le nom d'utilisateur et le mot de passe que vous avez créés lorsque vous avez exécuté createsuperuser.

13. Déployer l'application dans l'environnement standard App Engine

Rassemblez tout le contenu statique dans un seul dossier en exécutant la commande suivante, qui déplace tous les fichiers statiques de l'application dans le dossier spécifié par STATIC_ROOT dans settings.py:

python3 manage.py collectstatic

Importez l'application en exécutant la commande suivante depuis le répertoire de l'application où se trouve le fichier app.yaml:

gcloud app deploy

Attendez de recevoir le message vous informant que la mise à jour est terminée.

14. Tester l'application d'interface

Dans votre navigateur Web, accédez à https://<your_project_id>.appspot.com

Cette fois, votre requête est traitée par un serveur Web s'exécutant dans l'environnement standard App Engine.

La commande app deploy déploie l'application comme décrit dans app.yaml et définit la version nouvellement déployée comme version par défaut, de sorte qu'elle diffuse tout le nouveau trafic.

15. Production

Lorsque vous êtes prêt à diffuser votre contenu en production, remplacez la variable DEBUG par False dans mysite/settings.py.

16. Tester le chatbot

Vous pouvez tester votre chatbot dans le simulateur, ou utiliser l'intégration Web ou Google Home que vous avez précédemment créée.

Utilisateur : "salut"
Chatbot : "Bonjour ! Vous pouvez importer une photo pour explorer des monuments."
L'utilisateur importe une image.

Téléchargez cette image, nommez-la demo.jpg, puis utilisez-la.

Chatbot : "Le fichier est en cours de traitement. Voici les résultats: Golden Gate Bridge, Golden Gate Bridge, Golden Gate Bridge, Golden Gate Bridge, Golden Gate Bridge, Golden Gate Bridge, Golden Gate Bridge, Golden Gate Bridge, Golden Gate Bridge, Golden Gate Bridge)

Globalement, cela devrait se présenter comme suit:

17. Effectuer un nettoyage

Si vous souhaitez suivre d'autres ateliers de programmation Dialogflow, ignorez cette section et reprenez-la plus tard.

Supprimer l'agent Dialogflow

Cliquez sur à côté de votre agent existant.

Dans l'onglet General (Général), faites défiler la page vers le bas et cliquez sur Delete This Agent (Supprimer cet agent).
Saisissez Supprimer dans la fenêtre qui s'affiche, puis cliquez sur Supprimer.

18. Félicitations

Vous avez créé un chatbot dans Dialogflow et l'avez intégré à l'API Vision. Vous êtes maintenant développeur de chatbots !

En savoir plus

Pour en savoir plus, consultez les exemples de code sur la page Dialogflow GitHub.