Integra la API de Vision en Dialogflow

En este codelab, integrarás la API de Vision con Dialogflow para proporcionar respuestas enriquecidas y dinámicas basadas en el aprendizaje automático a las entradas de imágenes proporcionadas por el usuario. Crearás una app de chatbot que toma una imagen como entrada, la procesa en la API de Vision y devuelve un punto de referencia identificado al usuario. Por ejemplo, si el usuario sube una imagen del Taj Mahal, el chatbot devolverá Taj Mahal como respuesta.

Esto es útil porque puedes analizar los elementos de la imagen y tomar medidas en función de la información obtenida. También puedes crear un sistema de procesamiento de reembolsos para ayudar a los usuarios a subir recibos, extraer la fecha de compra del recibo y procesar el reembolso si la fecha es adecuada.

Consulta el siguiente diálogo de ejemplo:

Usuario: Hola

Chatbot: ¡Hola! Puedes subir una foto para explorar puntos de referencia

Usuario: Sube una imagen del Taj Mahal.

Chatbot: Se está procesando el archivo. Estos son los resultados: Taj Mahal, jardín del Taj Mahal y Taj Mahal.

Requisitos previos

Antes de continuar, debes completar los siguientes codelabs:

  1. Compila un programador de citas con Dialogflow
  2. Integra un chatbot de Dialogflow con Actions on Google
  3. Comprende las entidades en Dialogflow
  4. Compila un cliente de Django de frontend para una app de Dialogflow

También debes comprender los conceptos básicos y las construcciones de Dialogflow, que puedes obtener de los siguientes videos de la ruta de aprendizaje Crea un chatbot con Dialogflow:

Qué aprenderás

  • Cómo crear un agente de Dialogflow
  • Cómo actualizar un agente de Dialogflow para subir archivos
  • Cómo configurar la conexión de la API de Vision con la respuesta de Dialogflow
  • Cómo configurar y ejecutar una app de frontend de Django para Dialogflow
  • Cómo implementar la app de frontend de Django en Google Cloud en App Engine
  • Cómo probar la app de Dialogflow desde un frontend personalizado

Qué compilarás

  • Crea un agente de Dialogflow
  • Implementa un frontend de Django para subir un archivo
  • Implementa la entrega de Dialogflow para invocar la API de Vision en la imagen subida

Requisitos

  • Conocimientos básicos de Python
  • Conocimientos básicos de Dialogflow
  • Conocimientos básicos de la API de Vision

Crearás una nueva experiencia de conversación con un frontend personalizado de Django y lo extenderás para integrarlo con la API de Vision. Compilarás el frontend con el framework de Django, lo ejecutarás y probarás de forma local, y, luego, lo implementarás en App Engine. El frontend se verá de la siguiente manera:

El flujo de solicitudes funcionará de la siguiente manera, como se ilustra en la siguiente imagen:

  1. El usuario enviará una solicitud a través del frontend.
  2. Esto activará una llamada a la API de Dialogflow detectIntent para asignar la expresión del usuario al intent correcto.
  3. Una vez que se detecta el intent de explorar un lugar de interés, la entrega de Dialogflow enviará una solicitud a la API de Vision, recibirá una respuesta y la enviará al usuario.

Así se verá la arquitectura general.

La API de Vision es un modelo de AA previamente entrenado que obtiene estadísticas a partir de imágenes. Puede proporcionarte varias estadísticas, como el etiquetado de imágenes, la detección de rostros y puntos de referencia, el reconocimiento óptico de caracteres y el etiquetado de contenido explícito. Para obtener más información, consulta Vision AI.

  1. Ve a la consola de Dialogflow.
  2. Accede. (Si es la primera vez que usas la app, regístrate con tu correo electrónico).
  3. Acepta los Términos y Condiciones, y accederás a la consola.
  4. Haz clic en , desplázate hasta la parte inferior y haz clic en Crear agente nuevo.

5. Ingresa "VisionAPI" como el nombre del agente.

  1. Haz clic en Crear.

Dialogflow crea los siguientes dos intents predeterminados como parte del agente:

  1. El intent de bienvenida predeterminado saluda a los usuarios.
  2. El intent alternativo predeterminado capta todas las preguntas que tu bot no comprende.

En este punto, tienes un bot funcional que saluda a los usuarios, pero debes actualizarlo para que sepan que pueden subir una imagen y explorar lugares de interés.

Actualiza el intent de bienvenida predeterminado para notificar al usuario que suba una imagen

  1. Haz clic en Default Welcome Intent.
  2. Navega a Responses > Default > Text or SSML Response y, luego, ingresa "Hi! Puedes subir una foto para explorar lugares emblemáticos".

Crear entidad

  1. Haz clic en Entities.

  1. Haz clic en Crear entidad, asígnale el nombre "filename" y haz clic en Guardar.

Crea un intent nuevo

  1. Haz clic en Intents > Create Intent.
  2. Ingresa "Explorar imagen subida" como el Nombre del intent.
  3. Haz clic en Frases de entrenamiento > Agregar frases de entrenamiento y, luego, ingresa "el archivo es demo.jpg" y "el archivo es taj.jpeg" como expresiones del usuario con @filename como la entidad.

  1. Haz clic en Responses > Add Response > Default > Text or SSML Response. Ingresa "Evaluando archivo" y haz clic en Agregar respuestas.
  1. Haz clic en Entrega > Habilitar entrega y activa la opción Habilitar llamadas de webhook para este intent.

  1. Haz clic en Fulfillment.
  2. Habilita el Editor directo.

  1. Actualiza index.js con el siguiente código y actualiza YOUR-BUCKET-NAME con el nombre de tu bucket de 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 [];
    }
}
  1. Pega lo siguiente en package.json para reemplazar su contenido.
{
  "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"
  }
}
  1. Haz clic en Guardar.
  1. Clona este repositorio en tu máquina local:
https://github.com/priyankavergadia/visionapi-dialogflow.git
  1. Cambia al directorio que contiene el código. De manera opcional, puedes descargar la muestra como un archivo ZIP y extraerla.
cd visionapi-dialogflow

Cuando se implementa, tu app usa el proxy de Cloud SQL integrado en el entorno estándar de App Engine para comunicarse con tu instancia de Cloud SQL. Sin embargo, para probar tu app de manera local, debes instalar y usar una copia local del proxy de Cloud SQL en tu entorno de desarrollo. Para obtener más información, consulta Acerca del proxy de Cloud SQL.

Para realizar tareas de administrador básicas en tu instancia de Cloud SQL, puedes usar el cliente de Cloud SQL para MySQL.

Instalar el proxy de Cloud SQL

Descarga y, luego, instala el proxy de Cloud SQL con el siguiente comando. El proxy de Cloud SQL se usa para conectarse a tu instancia de Cloud SQL cuando se ejecuta de manera local.

Descarga el proxy:

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

Haz que el proxy sea ejecutable.

chmod +x cloud_sql_proxy

Cree una instancia de Cloud SQL

  1. Crea una instancia de Cloud SQL para MySQL de segunda generación. Ingresa "polls-instance" o un nombre similar. Es posible que la instancia tarde algunos minutos en estar lista. Cuando esté lista, debería aparecer en la lista de instancias.
  2. Ahora usa la herramienta de línea de comandos de gcloud para ejecutar el siguiente comando en el que [YOUR_INSTANCE_NAME] representa el nombre de tu instancia de Cloud SQL. Anota el valor que se muestra para connectionName para el siguiente paso. Se muestra en el formato [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME].
gcloud sql instances describe [YOUR_INSTANCE_NAME]

Como alternativa, puedes hacer clic en la instancia en la consola para obtener el Nombre de la conexión con la instancia.

Inicializa la instancia de Cloud SQL

Inicia el proxy de Cloud SQL con el valor de connectionName de la sección anterior.

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

Reemplaza [YOUR_INSTANCE_CONNECTION_NAME] por el valor que registraste en la sección anterior. Esto establece una conexión entre tu computadora local y tu instancia de Cloud SQL para realizar pruebas locales. Mantén el proxy de Cloud SQL en ejecución durante todo el tiempo que realices pruebas locales en tu app.

A continuación, crea un usuario y una base de datos de Cloud SQL nuevos.

  1. Crea una base de datos nueva con Google Cloud Console para tu instancia de Cloud SQL llamada polls-instance. Por ejemplo, puedes ingresar "Encuestas" como nombre.
  2. Crea un usuario nuevo con Cloud Console para tu instancia de Cloud SQL llamada polls-instance.

Configura la base de datos

  1. Abre mysite/settings-changeme.py para edición.
  2. Cambia el nombre del archivo por setting.py.
  3. En dos lugares, reemplaza [YOUR-USERNAME] y [YOUR-PASSWORD] por el nombre de usuario y la contraseña de la base de datos que creaste en la sección anterior. Esto ayuda a configurar la conexión a la base de datos para la implementación en App Engine y las pruebas locales.
  4. En la línea ‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]', reemplaza [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] por el nombre de la instancia que adquiriste en la sección anterior.
  5. Ejecuta el siguiente comando y copia el valor de connectionName que obtuviste para el siguiente paso.
gcloud sql instances describe [YOUR_INSTANCE_NAME]
  1. Reemplaza [YOUR-CONNECTION-NAME] por el valor que registraste en el paso anterior.
  2. Reemplaza [YOUR-DATABASE] por el nombre que elegiste en la sección anterior.
# [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]
  1. Cierra y guarda settings.py.
  1. En la consola de Dialogflow, haz clic en . En la pestaña General, navega a Google Project > Project ID y haz clic en Google Cloud para abrir la consola de Cloud.
  2. Haz clic en Menú de navegación ☰ > IAM y administración > Cuentas de servicio, luego, haz clic en junto a Integraciones de Dialogflow y, luego, en Crear clave.

  1. Se descargará un archivo JSON en tu computadora, que necesitarás en las siguientes secciones de configuración.
  1. En la carpeta de chat, reemplaza key-sample.json por tu archivo JSON de credenciales y asígnale el nombre key.json.
  2. En views.py de la carpeta de chat, cambia GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" por el ID de tu proyecto.

Crea un bucket de Cloud Storage para objetos estáticos de frontend

  1. En la consola de Cloud, haz clic en Navegar Menú de navegación ☰ > Storage.

  1. Haga clic en Crear bucket.
  2. Proporciona un nombre único a nivel global.

  1. Elige dónde almacenar tus datos. Elige Región y selecciona la ubicación que mejor se adapte a tus necesidades.
  2. Selecciona Estándar como la clase de almacenamiento predeterminada.

  1. Elige Configurar los permisos de forma uniforme a nivel del bucket (Solo política del bucket ) y, luego, haz clic en Continuar para crear el bucket.

  1. Una vez que se cree el bucket, haz clic en Menú de navegación ☰ > Storage > Navegador y busca el bucket que creaste.

  1. Haz clic en junto al bucket correspondiente y, luego, en Editar permisos del bucket.

  1. Haz clic en Agregar miembros, haz clic en Miembros nuevos, ingresa "allUsers" y, luego, haz clic en Selecciona un rol > Visualizador de objetos de Storage. Esto proporciona acceso de lectura a los archivos estáticos de frontend a allUsers. Este no es un parámetro de configuración de seguridad ideal para los archivos, pero funciona para el propósito de este codelab en particular.

Crea un bucket de Cloud Storage para las imágenes que suban los usuarios

Sigue las mismas instrucciones para crear un bucket independiente en el que subir las imágenes de los usuarios. Vuelve a establecer los permisos en "allUsers", pero selecciona Storage Object Creator y Storage Object Viewer como roles.

Configura el bucket de Cloud Storage en settings.py

  1. Abre mysite/setting.py.
  2. Ubica la variable GCS_BUCKET y reemplaza ‘<YOUR-GCS-BUCKET-NAME>' por tu bucket estático de Cloud Storage.
  3. Ubica la variable GS_MEDIA_BUCKET_NAME y reemplaza ‘<YOUR-GCS-BUCKET-NAME-MEDIA>' por el nombre de tu bucket de Cloud Storage para las imágenes.
  4. Ubica la variable GS_STATIC_BUCKET_NAME y reemplaza ‘<YOUR-GCS-BUCKET-NAME-STATIC>' por el nombre de tu bucket de Cloud Storage para los archivos estáticos.
  5. Guarda el archivo.
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 el bucket de Cloud Storage en home.html

  • Abre la carpeta de chat, luego abre templates y cambia el nombre de home-changeme.html a home.html.
  • Busca <YOUR-GCS-BUCKET-NAME-MEDIA> y reemplázalo por el nombre del bucket en el que deseas que se guarde el archivo subido por el usuario. Esto evita que almacenes el archivo subido por el usuario en el frontend y que mantengas los recursos estáticos en el bucket de Cloud Storage. La API de Vision llama al bucket de Cloud Storage para recuperar el archivo y realizar la predicción.

Para ejecutar la app de Django en tu computadora local, tendrás que configurar un entorno de desarrollo de Python que incluya Python, pip y virtualenv. Para obtener instrucciones, consulta Configura un entorno de desarrollo de Python.

  1. Crea un entorno aislado de Python e instala las dependencias.
virtualenv env
source env/bin/activate
pip install -r requirements.txt
  1. Ejecuta las migraciones de Django para configurar tus modelos.
python3 manage.py makemigrations
python3 manage.py makemigrations polls
python3 manage.py migrate
  1. Inicia un servidor web local.
python3 manage.py runserver
  1. En tu navegador web, ve a http://localhost:8000/. Deberías ver una página web sencilla como la siguiente:

El servidor web de Django que se ejecuta en tu computadora proporciona las páginas de la app de muestra. Cuando quieras avanzar, presiona Control+C (Command+C en Macintosh) para detener el servidor web local.

Usar la Consola del administrador de Django

  1. Crea un superusuario.
python3 manage.py createsuperuser
  1. Inicia un servidor web local.
python3 manage.py runserver
  1. En tu navegador web, ve a http://localhost:8000/admin/. Para acceder al sitio del administrador, ingresa el nombre de usuario y la contraseña que creaste cuando ejecutaste createsuperuser.

Para recopilar todo el contenido estático en una carpeta, ejecuta el siguiente comando, que mueve todos los archivos estáticos de la app a la carpeta que especifica STATIC_ROOT en settings.py:

python3 manage.py collectstatic

Para subir la app, ejecuta el siguiente comando desde el directorio de la app en el que se encuentra el archivo app.yaml:

gcloud app deploy

Espera a que aparezca el mensaje que informa que la actualización se completó.

En tu navegador web, ve a https://<your_project_id>.appspot.com.

Esta vez, un servidor web que se ejecuta en el entorno estándar de App Engine atiende la solicitud.

El comando app deploy implementa la app como se describe en app.yaml y establece la versión recién implementada como la versión predeterminada, lo que hace que entregue todo el tráfico nuevo.

Cuando todo esté listo para procesar tu contenido en producción, cambia la variable DEBUG a False en mysite/settings.py.

Puedes probar tu chatbot en el simulador o usar la integración web o de Google Home que creaste anteriormente.

  1. Usuario: "hola"
  2. Chatbot: "¡Hola! Puedes subir una foto para explorar lugares emblemáticos".
  3. El usuario sube una imagen.

Descarga esta imagen, asígnale el nombre demo.jpg y úsala.

  1. Chatbot: "Se está procesando el archivo. Estos son los resultados: puente Golden Gate, Golden Gate National Recreation Area, puente Golden Gate, puente Golden Gate, puente Golden Gate".

En general, debería verse de la siguiente manera:

Si deseas completar otros codelabs de Dialogflow, omite esta sección y vuelve a ella más tarde.

Borra el agente de Dialogflow

  1. Haz clic en junto a tu agente existente.

  1. En la pestaña General, desplázate hacia abajo y haz clic en Borrar este agente.
  2. Escribe Borrar en la ventana que aparece y haz clic en Borrar.

Creaste un chatbot en Dialogflow y lo integraste con la API de Vision. Ya eres un desarrollador de chatbots.

Más información

Para obtener más información, consulta las muestras de código en la página Dialogflow de GitHub.