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

Intégrer l'API Vision à Dialogflow

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'image fournies par l'utilisateur. Vous allez créer une application de chatbot qui prend 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 renverra "Taj Mahal" comme réponse.

C'est utile, car vous pouvez analyser les éléments de l'image et agir en fonction des informations obtenues. Vous pouvez également créer un système de traitement des remboursements pour aider les utilisateurs à importer des reçus, à extraire la date d'achat du reçu et à traiter le remboursement si la date est appropriée.

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

Utilisateur : Bonjour

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

Utilisateur : Importe une image du Taj Mahal.

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

Prérequis

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

Vous devez également comprendre les concepts et les constructions de base de Dialogflow, que vous pouvez découvrir 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 de l'API Vision avec le fulfillment Dialogflow
Configurer et exécuter une application frontend Django pour Dialogflow
Déployer l'application frontend Django sur Google Cloud avec App Engine
Tester l'application Dialogflow à partir d'une interface utilisateur personnalisée

Ce que vous allez faire

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

Prérequis

Connaissances de base de Python
Avoir des connaissances de base sur Dialogflow
Connaissances de base de l'API Vision

Vous allez créer une expérience conversationnelle avec un frontend Django personnalisé et l'étendre pour l'intégrer à l'API Vision. Vous allez créer le frontend avec le framework Django, l'exécuter et le tester en local, puis le déployer sur App Engine. L'interface utilisateur se présente comme suit :

Le flux de requête se déroule comme suit, comme illustré dans l'image ci-dessous :

L'utilisateur envoie une requête via l'interface.
Cela déclenchera un appel à l'API Dialogflow detectIntent pour mapper l'énoncé de l'utilisateur à l'intention appropriée.
Une fois l'intent "explorer un point de repère" 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.

L'API Vision est un modèle de ML pré-entraîné qui permet d'obtenir des insights à partir d'images. Elle peut vous fournir de nombreux insights, 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.

Accédez à la console Dialogflow.
Connectez-vous. (Si vous utilisez l'application pour la première fois, inscrivez-vous avec votre adresse e-mail.)
Acceptez les conditions d'utilisation pour accéder à la console.
Cliquez sur , faites défiler la page vers le bas, puis cliquez sur Créer un agent.

5. Saisissez "VisionAPI" comme 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 salue les utilisateurs, mais vous devez le mettre à jour pour leur indiquer qu'ils peuvent importer une image pour explorer des monuments.

Mettre à jour l'intent d'accueil par défaut pour inviter l'utilisateur à importer une image

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

Créer une entité

Cliquez sur Entités.

Cliquez sur Créer une entité, nommez-la "filename", puis cliquez sur Enregistrer.

Créer un intent

Cliquez sur Intents> Créer un intent.
Saisissez "Explore uploaded image" (Explorer l'image importée) comme nom de l'intention.
Cliquez sur Phrases d'entraînement > Ajouter des phrases d'entraînement, puis saisissez "le fichier est demo.jpg" et "le fichier est taj.jpeg" comme expressions utilisateur avec @filename comme entité.

Cliquez sur Responses > Add Response > Default > Text or SSML Response (Réponses > Ajouter une réponse > Par défaut > Réponse textuelle ou SSML). Saisissez "Évaluation du fichier", puis cliquez sur Ajouter des réponses.

Cliquez sur Fulfillment > Enable fulfillment (Traitement des demandes > Activer le traitement des demandes), puis activez Enable webhook call for this intent (Activer l'appel webhook pour cet intent).

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

Mettez à jour index.js avec le code suivant, puis 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 .

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

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

Accédez au répertoire contenant le code. Vous pouvez également télécharger l'exemple en tant que fichier zip et l'extraire.

cd visionapi-dialogflow

Une fois déployée, votre application communique avec votre instance Cloud SQL via le proxy Cloud SQL intégré à l'environnement standard App Engine. Notez toutefois que 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 permet de se connecter à votre instance Cloud SQL lorsqu'il est exécuté 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ête, celle-ci devrait apparaître dans la liste des instances.
Utilisez à présent 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. Elle servira à 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 en utilisant la valeur 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 depuis votre ordinateur local vers 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 à l'aide de la console Google Cloud pour votre instance Cloud SQL nommée polls-instance. Par exemple, vous pouvez saisir "sondages" comme nom.
Créez un utilisateur à l'aide de la console Cloud pour votre instance Cloud SQL nommée polls-instance.

Configurer les paramètres de base de données

Ouvrez mysite/settings-changeme.py pour y apporter des modifications.
Renommez le fichier en setting.py.
À deux endroits, remplacez [YOUR-USERNAME] et [YOUR-PASSWORD] par le nom d'utilisateur et le mot de passe de base de données que vous avez créés dans 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 locaux.
À la ligne ‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]', remplacez [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] par le nom de votre instance obtenu dans la section précédente.
Exécutez la commande suivante et copiez la valeur connectionName affiché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.

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

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

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

Créer un bucket Cloud Storage pour les objets statiques du frontend

Dans la console Cloud, cliquez sur Naviguer Menu de navigation ☰> Stockage.

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

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

Sélectionnez 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 Menu de navigation ☰> Stockage> Navigateur, puis recherchez 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. Saisissez "allUsers", puis cliquez sur Sélectionnez un rôle > Lecteur des objets de l'espace de stockage. Cela permet à allUsers d'accéder en lecture aux fichiers statiques de l'interface utilisateur. Ce n'est pas un paramètre de sécurité idéal pour les fichiers, mais il convient pour cet atelier de programmation.

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 dans lequel importer les images des utilisateurs. Définissez à nouveau les autorisations sur "allUsers", mais sélectionnez les rôles Créateur des objets de l'espace de stockage et Lecteur des objets de l'espace de stockage.

Configurer le bucket Cloud Storage dans settings.py

Ouvrez mysite/setting.py.
Localisez la variable GCS_BUCKET et remplacez ‘<YOUR-GCS-BUCKET-NAME>' par votre bucket Cloud Storage statique.
Localisez la variable GS_MEDIA_BUCKET_NAME et remplacez ‘<YOUR-GCS-BUCKET-NAME-MEDIA>' par le nom de votre bucket Cloud Storage pour les images.
Localisez 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 le bucket Cloud Storage dans home.html

Ouvrez le dossier de chat, puis templates et renommez home-changeme.html en home.html.
Recherchez <YOUR-GCS-BUCKET-NAME-MEDIA> et remplacez-le par le nom du bucket dans lequel vous souhaitez enregistrer le fichier importé par l'utilisateur. Cela vous empêche de stocker le fichier importé par l'utilisateur dans le frontend 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.

Pour exécuter l'application Django sur votre ordinateur local, configurez un environnement de développement Python incluant Python, pip et virtualenv. Pour obtenir des instructions, consultez 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/. Vous devriez voir une simple page Web qui ressemble à ceci :

Les pages de l'exemple d'application sont diffusées 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.

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

python3 manage.py collectstatic

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

gcloud app deploy

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

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

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

La commande app deploy déploie l'application conformément aux instructions du fichier app.yaml, et définit la version nouvellement déployée comme version par défaut, de sorte que celle-ci diffuse tout le nouveau trafic.

Lorsque vous êtes prêt à diffuser le contenu en production, faites passer la variable DEBUG à False dans le fichier mysite/settings.py.

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

Utilisateur : "Bonjour"
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 et utilisez-la.

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

Au final, cela devrait ressembler à ceci :

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

Supprimer l'agent Dialogflow

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

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

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.

Intégrer l'API Vision à Dialogflow Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Prérequis

Points abordés

Ce que vous allez faire

Prérequis

Mettre à jour l'intent d'accueil par défaut pour inviter l'utilisateur à importer une image

Créer une entité

Créer un intent

Installer le proxy Cloud SQL

Créer une instance Cloud SQL

Initialiser votre instance Cloud SQL

Configurer les paramètres de base de données

Créer un bucket Cloud Storage pour les objets statiques du frontend

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

Configurer le bucket Cloud Storage dans settings.py

Configurer le bucket Cloud Storage dans home.html

Utiliser la console d'administration Django

Supprimer l'agent Dialogflow

En savoir plus

Intégrer l'API Vision à Dialogflow