Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

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 afin de 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 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 renvoie Taj Mahal comme réponse.

C'est utile, car vous pouvez effectuer une analyse des éléments de l'image et agir sur les informations obtenues. Vous pouvez également créer un système de traitement des remboursements pour permettre aux utilisateurs d'importer des reçus, d'extraire la date d'achat du reçu et de procéder au remboursement si nécessaire.

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

Utilisateur: Bonjour

Chatbot: Bonjour. Vous pouvez importer une photo pour explorer des points de repère

Utilisateur: importez une image contenant le Taj Mahal.

Chatbot: traitement du fichier en cours. Voici les résultats: Taj Mahal, jardin du Taj Mahal.

Prerequisites

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

Vous devez également connaître les concepts et les constructions de base de Dialogflow, que vous pouvez exploiter dans les vidéos suivantes de la procédure 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 frontend Django sur 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
Mettre en œuvre le traitement Dialogflow pour appeler l'API Vision avec l'image importée

Ce dont vous avez besoin

Une connaissance de base de Python
Connaissances de base de Dialogflow
Comprendre les bases de l'API Vision

Vous allez créer une expérience de conversation avec une interface Django personnalisée et l'étendre à l'intégration de l'API Vision. Vous allez créer l'interface à l'aide du framework Django, l'exécuter et la tester localement, puis la déployer sur App Engine. L'interface ressemblera à ceci:

Le flux de la requête se présente comme suit:

L'utilisateur envoie une requête via l'interface.
Cela déclenchera un appel vers l'API DetectDetectIntent de manière à mapper l'énoncé de l'utilisateur à l'intent approprié.
Une fois l'intent d'exploration repéré, 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 génère des insights à partir d'images. Vous pouvez obtenir plusieurs 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 la page IA Vision.

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 vers le bas, puis cliquez sur Create new agent (Créer un agent).

5. Saisissez "VisionAPI" comme nom de l'agent.

Cliquez sur Create (Créer).

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

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

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

Modifier l'intent de bienvenue par défaut pour demander à l'utilisateur d'importer l'image

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

Créer une entité

Cliquez sur Entities (Entités).

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

Créer un intent

Cliquez sur Intents > Create Intent (Créer un intent).
Saisissez "&exploration de l'image importée" comme nom de l'intent.
Cliquez sur Training phrases (Expressions d'entraînement) > Add Training Phrases (Ajouter des expressions d'entraînement) et saisissez "&file" (fichier) est demo.jpg" and &file (taj.jpeg) comme expressions utilisateur (@filename) est l'entité.

Cliquez sur Réponses > Ajouter une réponse > Par défaut > Texte ou réponse SSML. Saisissez "&Assessment file" (Évaluation du fichier), puis cliquez sur Ajouter des réponses.

Cliquez sur Fulfillment &gt, Enable fulfillment (Activer le fulfillment), puis sur Enable webhook call for this intent (Activer l'appel webhook pour cet intent).

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

Remplacez index.js par le code suivant, puis indiquez YOUR-BUCKET-NAME pour 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 contenu 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 qui contient 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 utilise le proxy Cloud SQL intégré à l'environnement standard App Engine. Ainsi, elle peut communiquer avec votre instance Cloud SQL. Toutefois, pour pouvoir tester votre application localement, vous devez installer et utiliser une copie locale du proxy Cloud SQL dans votre environnement de développement. Pour en savoir plus, consultez la page À propos du proxy Cloud SQL.

Pour effectuer des tâches d'administration 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 sert à se connecter à votre instance Cloud SQL lors de son exécution locale.

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. L'opération peut prendre quelques minutes. Une fois prête, elle doit apparaître dans la liste des instances.
Utilisez maintenant l'outil de ligne de commande gcloud pour exécuter la commande suivante, où [YOUR_INSTANCE_NAME] représente le nom de votre instance Cloud SQL. Notez la valeur indiquée pour connectionName à l'étape suivante. Elle 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 de connectionName dans 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. Une connexion est établie entre votre ordinateur local et votre instance Cloud SQL à des fins de test local. Continuez à exécuter le proxy Cloud SQL pendant toute la durée du test en local.

Ensuite, créez un utilisateur et une base de données Cloud SQL.

Créez une base de données à l'aide de Google Cloud Console pour votre instance Cloud SQL nommée polls-instance. Par exemple, vous pouvez saisir "polls" comme nom.
Créez un utilisateur utilisant Cloud Console 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.
Attribuez-lui le nom setting.py.
À deux endroits différents, 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 dans la section précédente. Cela permet de configurer la connexion à la base de données pour le déploiement 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 acquis dans 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.

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 Cloud Console.
Cliquez sur le menu de navigation ⇥ > IAM & Admin >Service accounts, puis sur à côté de Dialogflow Integration (Intégrations Dialogflow), puis cliquez sur Create key (Créer une clé).

Un fichier JSON est téléchargé sur votre ordinateur, dont vous avez besoin dans les sections de configuration suivantes.

Dans le dossier de chat, remplacez key-sample.json par le fichier JSON d'identifiants et nommez-le key.json.
Dans le dossier 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 de l'interface

Dans Cloud Console, cliquez sur le menu de navigation ☰, puis Storage.

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

Choisissez où stocker vos données. Sélectionnez Région et choisissez 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 ⇥, puis sur Storage > Browser (Navigateur) et localisez le bucket que vous avez créé.

Cliquez sur l'icône à côté du bucket correspondant, puis sur Modifier les autorisations pour le bucket.

Cliquez sur Add Members (Ajouter des membres), cliquez sur New members (Nouveaux membres), saisissez &&t;allUsers,&quot, puis sélectionnez Select a role (Rôle) > Storage Object Viewer (Lecteur des objets de l'espace de stockage). Fournit un accès en lecture aux fichiers de l'interface statique à allUsers. Ce paramètre de sécurité n'est pas idéal pour les fichiers, mais il est destiné à 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 permettant d'importer des images utilisateur. Définissez à nouveau les autorisations sur "allUsers", mais sélectionnez les rôles Storage Object Creator et Storage Object Viewer (Lecteur des objets de l'espace de stockage).

Configurez le bucket Cloud Storage dans le fichier settings.py

Ouvrez mysite/setting.py.
Recherchez la variable GCS_BUCKET et remplacez ‘<YOUR-GCS-BUCKET-NAME>' par votre bucket statique Cloud Storage.
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 le bucket Cloud Storage dans home.html

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

Pour exécuter l'application Django sur votre ordinateur local, vous devez configurer un environnement de développement Python, comprenant 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 un navigateur Web, accédez à http://localhost:8000/. Vous devriez voir une page Web simple semblable à celle-ci :

Les exemples de pages d'application sont fournis par le serveur Web Django qui s'exécute sur votre ordinateur. Lorsque vous serez prêt à continuer, 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 créés lors de l'exécution de createsuperuser.

Pour rassembler tout le contenu statique dans un dossier, exécutez 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 le message vous informant que la mise à jour est terminée.

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

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

La commande app deploy déploie l'application comme décrit dans app.yaml et définit la nouvelle version déployée comme version par défaut, ce qui lui permet de diffuser tout le nouveau trafic.

Lorsque vous êtes prêt à diffuser votre contenu en production, définissez la variable DEBUG sur False dans 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 : "salut".
Chatbot : "Bonjour ! Vous pouvez importer une photo pour explorer des points de repère.
L'utilisateur importe une image.

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

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

Dans l'ensemble, cela devrait se présenter comme suit:

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

Supprimer l'agent Dialogflow

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

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

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

Learn more

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