Descripción general

En este lab, integrarás un agente de IA con una app de Flutter. Flutter se usa como framework de la app cliente, Vertex AI Search se usa como una base de datos de vectores y Reasoning Engine se usa para crear y, luego, implementar un agente con LangChain en Vertex AI. El agente usa Gemini, una familia de modelos de lenguaje grandes (LLM) de amplia capacidad, para generar respuestas de IA a instrucciones de imágenes y texto.

El lab tiene VSCode aprovisionado previamente como IDE con code-server, junto con las extensiones de Flutter y Dart que se requieren para ejecutar la app de Flutter. El lab también incluye fwr, una herramienta que se usa para entregar la app de Flutter como una aplicación web a la que se accede a través de un navegador.

Este lab está dirigido a desarrolladores con diversos niveles de experiencia que contribuyen a la creación de aplicaciones, pero que tal vez aún no se familiarizaron con el desarrollo de aplicaciones en la nube. Tener algo de experiencia en Python y conocer el framework Flutter puede ser de ayuda. No es necesario estar familiarizado con Flutter para realizar las tareas de este lab; de todas formas, revisarás parte del código de la app de Flutter y probarás la funcionalidad de la app.

Objetivos

En este lab, realizarás las siguientes tareas:

• Crear un almacén de datos de búsqueda y una app de búsqueda con aplicaciones de IA en la consola de Google Cloud

• Implementar un agente de Reasoning Engine con Vertex AI Workbench

• Usar una app de Python que se integra con Vertex AI Search y el agente de Reasoning Engine

• Implementar la app en Cloud Run y utilizarla como backend para una app de Flutter

• Configurar un proyecto de Firebase y conectarlo a la app de Flutter

  A continuación, verás una descripción general de los diferentes componentes que se usan en este lab:

  

Configuración

En cada lab, recibirá un proyecto de Google Cloud y un conjunto de recursos nuevos por tiempo limitado y sin costo adicional.

1. Accede a Qwiklabs desde una ventana de incógnito.

2. Ten en cuenta el tiempo de acceso del lab (por ejemplo, 1:15:00) y asegúrate de finalizarlo en el plazo asignado.
   No existe una función de pausa. Si lo necesita, puede reiniciar el lab, pero deberá hacerlo desde el comienzo.

3. Cuando esté listo, haga clic en Comenzar lab.

4. Anote las credenciales del lab (el nombre de usuario y la contraseña). Las usarás para acceder a la consola de Google Cloud.

5. Haga clic en Abrir Google Console.

6. Haga clic en Usar otra cuenta, copie las credenciales para este lab y péguelas en el mensaje emergente que aparece.
   Si usa otras credenciales, se generarán errores o incurrirá en cargos.

7. Acepta las condiciones y omite la página de recursos de recuperación.

Tarea 1. Crea un almacén de datos de búsqueda y una app de búsqueda

En esta tarea, implementarás la capacidad de búsqueda para tu app de Flutter creando un almacén de datos de búsqueda y una app de búsqueda usando aplicaciones de IA en la consola de Google Cloud.

Crea un almacén de datos de búsqueda

1. En la consola de Cloud, haz clic en Ver todos los productos. En la página Todos los productos, desplázate hasta la sección sobre Inteligencia Artificial y, luego, haz clic en Aplicaciones basadas en IA.

2. Haz clic en Continue and activate the API.

3. En el panel izquierdo, haz clic en Almacenes de datos y, en la página Almacenes de datos, haz clic en Crear almacén de datos.

   En esta página, configurarás tu fuente de datos para que se use en los resultados de la búsqueda. El lab tiene un bucket de Cloud Storage aprovisionado previamente que contiene un archivo .csv con datos sobre productos de la tienda de artículos promocionales de Google.

4. Para seleccionar Cloud Storage como la fuente de datos, en Cloud Storage, haz clic en Seleccionar.

5. Para el tipo de datos que se importará, selecciona Datos estructurados de Preguntas frecuentes para una aplicación de chat (CSV).

6. Para seleccionar una carpeta o un archivo para importar, haz clic en Archivo.

7. Para proporcionar la URL de Cloud Storage al archivo CSV, haz clic en Explorar.

8. Para ver el contenido del bucket de Cloud Storage , haz clic en .

9. Selecciona el archivo goog_merch.csv y, luego, haz clic en Seleccionar.

   Se completa el URI gs:// de la carpeta.

   

10. Haz clic en Continuar.

11. En el nombre del almacén de datos, escribe goog-merch-ds.

12. Haz clic en Crear.

    Se creará un almacén de datos y se iniciará la transferencia de datos del archivo CSV.

13. En la página Almacenes de datos, haz clic en el nombre del almacén de datos que acabas de crear.

14. En la pestaña Documentos, se muestra una lista de los documentos que se importaron. Para ver los datos asociados con un documento, haz clic en Ver documento.

Para verificar este objetivo, haz clic en Revisar mi progreso. Crear un almacén de datos de Vertex AI Search

Crea una app de búsqueda

Para usar el almacén de datos de búsqueda, debes conectarlo a una app de búsqueda en Vertex AI Agent Builder.

1. En la consola de Cloud, haz clic en AI applications y, luego, en Apps.

2. Haz clic en Crear app.

3. En la página Crear app, para elegir el tipo de app que deseas compilar, en Búsqueda y asistente > Búsqueda personalizada (general), haz clic en Crear.

4. En la página Busca la configuración de la app, configura una app de búsqueda de sitio web con estos parámetros de configuración y deja el resto de los parámetros con los valores predeterminados:

   Propiedad	Valor (escríbelo o selecciónalo)
   Funciones de la edición Enterprise	Inhabilitar
   Nombre de tu app	gms-search-app
   Nombre externo de tu organización o empresa	gms-company
   Ubicación de la aplicación	global (Global)

5. Haz clic en Continuar.

6. Aparece una lista de almacenes de datos existentes. Selecciona el almacén de datos goog_merch_ds que creaste en la subtarea anterior.

7. Para crear la app de búsqueda, haz clic en Crear.

   Se crea la app de búsqueda y el almacén de datos se conecta a la app.

8. Para probar la app de búsqueda, haz clic en Vista previa en el menú de navegación de aplicaciones de IA.

9. En el campo Buscar, escribe dino.

   Se muestra una lista de resultados de búsqueda relacionados de los documentos que se importaron al almacén de datos.

   

   Nota: Si ves un error que indica: La vista previa de la búsqueda no está lista aún, espera unos minutos antes de volver a intentarlo. Si no quieres esperar, puedes continuar con la siguiente tarea del lab.

Para verificar este objetivo, haz clic en Revisar mi progreso. Crear una app de Vertex AI Search

Tarea 2. Compila y, luego, implementa el backend

El backend de nuestra app de Flutter se ejecutará como un servicio de Cloud Run en Google Cloud. El servicio de backend se integra con la app de búsqueda que creaste en el paso anterior para generar respuestas de búsqueda a partir de los datos de la tienda de artículos promocionales. El backend también se integra con un agente de Reasoning Engine que accede a Gemini y proporciona contenido de IA generativa en respuesta a las consultas de la app de Flutter.

En esta tarea, compilarás y, luego, implementarás la app de backend de Python en Cloud Run.

Configura y revisa la app de backend

1. Para este lab, se aprovisionó previamente un IDE basado en VSCode. Para acceder al IDE, copia la URL del servicio del IDE del panel de credenciales de Qwiklabs del lab y pégala en una nueva ventana de incógnito del navegador.

   

   Nota: La URL del servicio del IDE es el extremo de un servicio de Cloud Run que se aprovisiona previamente para este lab y que redirige las solicitudes a la VM de code-server. El IDE se compila con Code Server y también incluye las extensiones de Flutter, Dart y Vim.

   

2. Abre una terminal en el IDE. En el menú de navegación del IDE (), haz clic en Terminal > New Terminal.

   Nota: Ejecuta los comandos de los pasos que se indican a continuación en la ventana de terminal del IDE.

3. La versión inicial de la app de backend y los archivos relacionados están aprovisionados previamente para el lab. Copia la versión inicial de la carpeta de la app de backend y su contenido desde Cloud Storage:

   gcloud storage cp -r gs://cloud-training/OCBL453/photo-discovery/ag-web ~ Nota: Si se te solicita, haz clic en Allow para pegar texto y también imágenes del portapapeles y, luego, presiona Intro.

4. Para enumerar el contenido de la carpeta, ejecuta lo siguiente en la ventana de terminal del IDE:

   ls ~/ag-web/app

   La carpeta ag-web/app contiene el código fuente de la aplicación y otros archivos necesarios para compilar y, luego, implementar la app de backend en Cloud Run.

5. Ajusta los parámetros de configuración PROJECT_ID, LOCATION y STAGING_BUCKET de la app.

   sed -i 's/GCP_PROJECT_ID/{{{project_0.project_id|set at lab start}}}/' ~/ag-web/app/app.py sed -i 's/GCP_REGION/{{{project_0.default_region|set at lab start}}}/' ~/ag-web/app/app.py sed -i 's/GCS_BUCKET/{{{project_0.startup_script.lab_bucket_name|set at lab start}}}/' ~/ag-web/app/app.py

6. Configura la app de backend para que use el almacén de datos de búsqueda que creaste anteriormente.

   En el siguiente comando, reemplaza la cadena {YOUR_SEARCH_DATA_STORE_ID} por el valor del ID de tu almacén de datos de búsqueda.

   Asegúrate de quitar las llaves del comando sed.

   Nota: Para obtener el valor del ID del almacén de datos de búsqueda, en la consola de Cloud, ve a AI Applications > Almacenes de datos y, luego, haz clic en el nombre del almacén de datos de búsqueda que creaste anteriormente. Copia el valor del ID del almacén de datos, que es el mismo que el ID del motor de búsqueda. sed -i 's/SEARCH_ENGINE_ID/{YOUR_SEARCH_DATA_STORE_ID}/' ~/ag-web/app/app.py

   

7. Para ver el código en el IDE, en el menú de navegación del IDE, haz clic en y, luego, en Open Folder.

8. Selecciona la carpeta IDE-DEV/ag-web/ de la lista y, luego, haz clic en Ok.

9. Para confirmar que confías en los autores del código, haz clic en Yes, I trust the authors.

10. En el panel Explorador, expande la carpeta app y, luego, haz clic en app.py para abrir el archivo en el editor.

    El código de la app de backend hace lo siguiente:

    • Inicializa Vertex AI con el ID del proyecto de Google Cloud, la región y el bucket de Cloud Storage de tu lab.
    • La función search_gms() usa el extremo de almacenes de datos de la API discoveryengine.googleapis.com para iniciar una solicitud de búsqueda. El ID del almacén de datos que creaste anteriormente se usa en la URL.
    • La función usa la consulta que proporciona el usuario para realizar la búsqueda en el contenido del almacén de datos y formatea los resultados en una respuesta JSON.
    • La app usa flask para enrutar llamadas a las funciones individuales. El extremo / es la página predeterminada que se usa para verificar que la app se cargue correctamente, mientras que el extremo /ask_gms invoca la función search_gms() que usa Vertex AI Search.

Compila y, luego, implementa la app en Cloud Run

Hay una secuencia de comandos de implementación disponible para compilar y, luego, implementar la app de backend en Cloud Run.

1. Abre una ventana de terminal en el IDE y cambia a la carpeta de la app de backend:

   cd ~/ag-web/app

2. Autentícate en Google Cloud desde la gcloud CLI:

   gcloud auth login

3. Para continuar, escribe Y.

4. Para iniciar el flujo de acceso, pulsa Control (para Windows y Linux) o Command (para MacOS) y haz clic en el vínculo de la terminal.

5. Si se te pide que confirmes la apertura del sitio web externo, haz clic en Open.

6. Haz clic en la dirección de correo electrónico del estudiante del lab.

7. Cuando se te lo solicite, haz clic en Continuar.

8. Para permitir que el SDK de Google Cloud acceda a tu cuenta de Google y aceptar las condiciones, haz clic en Permitir.

   Tu código de verificación aparecerá en la pestaña del navegador.

9. Haz clic en Copiar.

10. En la ventana de terminal del IDE, en el área que dice Enter authorization code, pega el código y presiona Intro.

    Ya accediste a Google Cloud.

11. Haz que la secuencia de comandos deploy.sh sea ejecutable y, luego, ejecútala para implementar la app en la región de Cloud Run especificada:

    chmod a+x deploy.sh; ./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}

    Después de compilar la app y de implementarla en Cloud Run correctamente, se mostrará la URL del extremo de la app al final del resultado de la secuencia de comandos. La URL se generó con el comando gcloud run deploy que se ejecutó en la secuencia de comandos.

    Nota: Este comando tarda en ejecutarse, así que espera a que se complete antes de continuar con la siguiente tarea.

Prueba la app de backend

Para probar las funciones de la app, accede a su extremo de Cloud Run.

1. Copia la URL del extremo de la app que se generó en el paso anterior y navega a esa URL en una nueva pestaña del navegador.

2. Cuando la app se carga, la página principal muestra el mensaje Welcome to the ag-web backend app.

3. En la barra de URL del navegador, agrega la ruta de acceso que se indica a continuación al final de la URL:

   /ask_gms?query=dino

4. Verifica que la app responda con resultados del almacén de datos de búsqueda que creaste anteriormente.

Para verificar este objetivo, haz clic en Revisar mi progreso. Crear una app de backend

Tarea 3. Configura Firebase

Para invocar la API de Gemini, la app de frontend de Flutter usa el SDK de Dart de Vertex AI para Firebase. Este SDK está disponible como el paquete firebase_vertexai de pub.dev, que es el repositorio de paquetes oficial para apps de Dart y Flutter.

Firebase es una plataforma de desarrollo de apps de backend de Google que proporciona servicios para varias plataformas, como Android, iOS y otras.

En esta tarea, configurarás Firebase y accederás a Firebase CLI. Más adelante en el lab, conectarás tu app de Flutter a Firebase.

Configura Firebase

Para usar el SDK, primero debes configurar un proyecto de Firebase.

1. En una pestaña de una ventana de incógnito, accede a Firebase console en https://console.firebase.google.com.

2. Haz clic en Crear un proyecto de Firebase.

3. Para agregar Firebase al proyecto de Google Cloud existente de tu lab, haz clic en la opción para agregar Firebase al proyecto de Google Cloud en la parte inferior de la página.

4. Haz clic en Seleccionar un proyecto de Google Cloud y, luego, selecciona el proyecto del lab de la lista.

5. Acepta las condiciones de Firebase y haz clic en Continuar.

6. Vuelve a hacer clic en Continuar.

7. Para usar el plan de facturación predeterminado, haz clic en Confirmar y continuar.

8. Inhabilita Google Analytics para este proyecto y, luego, haz clic en Agregar Firebase.

9. Espera a que el proyecto de Firebase esté listo y, luego, haz clic en Continuar.

   Firebase ya está listo para usarse con el proyecto de Google Cloud de tu lab.

Accede a Firebase

1. En la ventana de terminal del IDE, accede a Firebase CLI:

   firebase login --no-localhost

2. Para permitir que Firebase recopile información de los informes de la CLI y del emulador, escribe Y y presiona Intro.

3. Anota el ID de la sesión y sigue los pasos para iniciar el flujo de acceso. Presiona Control (para Windows y Linux) o Command (para MacOS) y haz clic en la URL en la terminal.

4. Cuando se te solicite abrir el sitio web externo, haz clic en Abrir.

5. Haz clic en el ID de correo electrónico de estudiante de tu lab.

6. Haz clic en Continuar.

7. Para otorgar los permisos correspondientes a Firebase CLI, haz clic en Permitir.

8. Haz clic en Yes, I just ran this command.

9. Verifica tu ID de sesión y, luego, haz clic en Yes, this is my session ID.

10. Para copiar el código de autorización, haz clic en Copiar.

11. Pega el código de autorización donde se solicita en la ventana de terminal del IDE y presiona Intro.

    Ya accediste a Firebase CLI.

Tarea 4: Crea un agente de IA de Reasoning Engine

Un agente de IA es una aplicación que usa el poder de los modelos de lenguaje grandes (LLM) para realizar el razonamiento y la organización con herramientas externas para lograr su objetivo. Vertex AI Agent Builder es un paquete de productos y herramientas de Google que te ayuda a crear agentes de IA conectándolos a tus fuentes de datos de confianza.

Vertex AI Reasoning Engine (también conocido como LangChain en Vertex AI) te ayuda a crear y a implementar un agente de razonamiento con Vertex AI Agent Builder. LangChain es una herramienta de OSS popular que se usa para crear chatbots y sistemas de RAG.

Reasoning Engine permite que los desarrolladores utilicen la llamada a función para asignar el resultado de los LLM (Gemini) a las funciones de Python. Reasoning Engine se integra estrechamente con el SDK de Python para el modelo de Gemini en Vertex AI y es compatible con LangChain y otros frameworks de Python.

En esta tarea, usarás Vertex AI Workbench con un notebook de Jupyter para implementar un agente de Reasoning Engine con funciones de Python. El agente se usará en nuestra aplicación de backend de IA generativa en la siguiente tarea de este lab.

Crea una instancia de Vertex AI Workbench

Vertex AI Workbench es un entorno de desarrollo basado en notebooks de Jupyter para todo el flujo de trabajo de la ciencia de datos y el aprendizaje automático. Puedes interactuar con Vertex AI y otros servicios de Google Cloud desde el notebook de Jupyter de una instancia de Vertex AI Workbench. Por ejemplo, Vertex AI Workbench te permite acceder a tus datos y explorarlos desde un notebook de Jupyter usando las integraciones de BigQuery y Cloud Storage.

Las instancias de Vertex AI Workbench tienen un conjunto previamente instalado de paquetes de aprendizaje profundo, lo que incluye la compatibilidad con los frameworks de TensorFlow y PyTorch.

Los notebooks de Vertex AI Workbench proporcionan una solución flexible y escalable para desarrollar y, posteriormente, implementar modelos de AA en Google Cloud.

1. Para crear una instancia de Workbench, en la consola de Cloud, haz clic en el menú de navegación () y, luego, selecciona Vertex AI > Workbench.

2. Si se te solicita en la consola de Cloud, haz clic para habilitar la API de Notebooks.

3. Asegúrate de que Instancias esté seleccionado en la pestaña Instancias y, luego, haz clic en Crear nueva.

   

4. En la página Instancia nueva, en Nombre, escribe my-instance.

5. Deja el resto de los parámetros con la configuración predeterminada y haz clic en Crear.

   Tu nueva instancia se inicia en la sección de instancias. Espera a que se cree la instancia antes de continuar con el siguiente paso.

   Nota: Aparecerá una marca de verificación verde junto a la instancia cuando esté lista para usar.

6. Cuando la instancia esté lista, haz clic en Abrir Jupyterlab.

   

7. Para iniciar un notebook Python 3 de Jupyter, haz clic en el notebook Python 3.

   

Copia un archivo de notebook

Se aprovisionó previamente un notebook que crea y también implementa un agente de Reasoning Engine para este lab.

1. Para copiar el notebook en tu instancia de JupyterLab, copia este código en la primera celda de tu nuevo notebook:

   !gcloud storage cp gs://cloud-training/OCBL453/photo-discovery/ag-web/ag_setup_re.ipynb .

   

2. Selecciona la celda y ejecútala haciendo clic en Ejecutar en el menú de la celda:

   

   El comando copia el notebook de Cloud Storage a tu instancia de JupyterLab. Una vez que se completa el comando, el archivo de notebook se muestra en la carpeta raíz de nivel superior.

   

3. Para abrir el notebook, haz doble clic en el archivo del notebook en la lista de la carpeta. Se crea otra pestaña con el contenido del notebook.

Crea y, luego, implementa un agente de Reasoning Engine

1. Ejecuta todas las celdas de código del notebook en orden desde el principio. Para ejecutar una celda, haz clic en cualquier parte de la celda para seleccionarla y, luego, haz clic en Ejecutar en el menú de la celda o en el menú superior del notebook.

   Nota: Cuando ejecutes el comando en una celda, espera a que se complete antes de pasar a la siguiente. Cuando se completa la ejecución de un comando, el asterisco (*) en el campo del número de la celda se reemplaza por el número de la celda. Nota: Antes de ejecutar una celda, consulta las notas a continuación para ver las instrucciones o los pasos específicos de la celda. Estas instrucciones se marcan con el prefijo CELL INSTR.

   a. [CELL INSTR] Reiniciar el entorno de ejecución actual

   Si se te solicita, en el diálogo Reiniciar kernel, haz clic en Aceptar.

   b. [CELL INSTR] Establecer la información del proyecto de Google Cloud y, luego, inicializar el SDK de Vertex AI:

   Antes de ejecutar esta celda para inicializar el SDK de Vertex AI, actualiza los valores de configuración para el ID del proyecto, la ubicación y el bucket de etapa de pruebas del lab:

   PROJECT_ID = "{{{project_0.project_id|set at lab start}}}" LOCATION = "{{{project_0.default_region|set at lab start}}}" STAGING_BUCKET = "gs://{{{project_0.startup_script.lab_bucket_name}}}"

   Celda actualizada con parámetros de configuración de muestra:

   

   c. [CELL INSTR] Definir la función de la herramienta para Vertex AI Search:

   Antes de ejecutar esta celda, reemplaza el valor de GOOGLE_SHOP_VERTEXAI_SEARCH_URL por la URL del extremo de Cloud Run de tu app de backend.

   Para recuperar la URL del extremo, en la consola de Cloud, navega a Cloud Run y, luego, haz clic en el nombre de la app de backend: ag-web. Copia el valor de la URL del extremo y reemplázalo en la celda.

   

   Celda actualizada con la URL del extremo de Cloud Run de muestra de la app de backend:

   

   Nota: También puedes ejecutar una celda haciendo clic en Ejecutar en la barra de menú del notebook.

2. Después de ejecutar la celda Implementar el agente en el entorno de ejecución de Reasoning Engine, espera a que el comando se complete y crea el agente de Reasoning Engine. Luego, copia el ID de Reasoning Engine:

   

   Usarás este ID para configurar y volver a implementar la app de backend en la siguiente tarea.

   Nota: Esta celda puede tardar hasta 10 minutos en completarse. Espera a que se muestre el resultado final que indica que se creó Reasoning Engine antes de continuar con el siguiente paso.

3. Para probar la operación correcta del agente de Reasoning Engine, ejecuta las siguientes dos celdas y observa el resultado.

   El agente de Reasoning Engine invocó correctamente el almacén de datos de Wikipedia o Vertex AI Search según la entrada de la consulta y el resultado del modelo de Gemini.

Para verificar este objetivo, haz clic en Revisar mi progreso. Implementar el agente de Reasoning Engine

Tarea 5. Mejora la app de backend

Ahora mejoremos la app de backend para invocar al agente de Reasoning Engine que implementaste en la tarea anterior.

La versión inicial de la app de backend solo recuperaba resultados directamente de Vertex AI Search. En la nueva versión, la app invocará al agente de Reasoning Engine que usa el resultado de Gemini y las herramientas del agente para generar una respuesta de Vertex AI Search o Wikipedia según la instrucción de entrada.

En esta tarea, actualizarás el código de la app de backend para agregar un punto de entrada adicional que invoca al agente de Reasoning Engine con una consulta de solicitud y devuelve la respuesta del agente.

Actualiza la app de backend

1. En la ventana de terminal del IDE, agrega el archivo app.py con el nuevo código del punto de entrada ejecutando el siguiente comando:

   cat << EOF >> ~/ag-web/app/app.py # # Motor de razonamiento # NB_R_ENGINE_ID = "REASONING_ENGINE_ID" from vertexai.preview import reasoning_engines remote_agent = reasoning_engines.ReasoningEngine( f"projects/{PROJECT_ID}/locations/{LOCATION}/reasoningEngines/{NB_R_ENGINE_ID}" ) # Extremo que la app de Flask usará para llamar al agente @app.route("/ask_gemini", methods=["GET"]) def ask_gemini(): query = request.args.get("query") log.info("[ask_gemini] query: " + query) retries = 0 resp = None while retries < MAX_RETRIES: try: retries += 1 resp = remote_agent.query(input=query) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Empty response.") break except Exception as e: log.error("[ask_gemini] error: " + str(e)) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Too many retries.") return "No response received from Reasoning Engine." else: return resp["output"] EOF

2. Configura la app de backend para que use el agente de Reasoning Engine que creaste anteriormente.

   Reemplaza la cadena {YOUR_REASONING_ENGINE_ID} en el comando de abajo con el valor de tu ID de Reasoning Engine que copiaste de la celda del notebook en la tarea anterior. Luego, ejecuta el comando que aparece a continuación en la ventana de terminal del IDE.

   Asegúrate de quitar las llaves del comando sed.

   sed -i 's/REASONING_ENGINE_ID/{YOUR_REASONING_ENGINE_ID}/' ~/ag-web/app/app.py

3. Para ver el código en el IDE, en el menú de navegación del IDE, haz clic en y selecciona el archivo IDE-DEV/ag-web/app/app.py.

   En la versión mejorada de la app de backend:

   • Se recupera un handle en remote_agent del entorno de ejecución de Reasoning Engine con el REASONING_ENGINE_ID del agente que creaste en la tarea anterior.
   • Se establece un nuevo extremo /ask_gemini que define la función `ask_gemini().
   • La función pasa el parámetro query que proporciona el usuario desde la solicitud a Reasoning Engine (remote_agent) y devuelve la respuesta del agente.

Compila y vuelve a implementar la app de backend en Cloud Run

1. Cambia a la carpeta de la app de backend:

   cd ~/ag-web/app

2. Ejecuta la secuencia de comandos para volver a implementar la app en la región de Cloud Run especificada:

   ./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}

Prueba la app de backend

Para probar las funciones de la app, accede a su extremo de Cloud Run.

1. Copia la URL del extremo de la app que se generó en el paso anterior y navega a esa URL en una nueva pestaña del navegador.

2. Cuando la app se carga, la página principal muestra el mensaje Welcome to the ag-web backend app.

3. En la barra de URL del navegador, agrega la ruta de acceso que se indica a continuación al final de la URL:

   /ask_gemini?query=where can I buy the chrome dino pin

   La app responde con los resultados del agente que recuperó resultados del almacén de datos de Vertex AI Search que creaste anteriormente.

   Chrome Dino Enamel Pin is a product sold at Google Merch Shop. The price is 7.00 USD. You can buy the product at their web site: https://shop.merch.google/product/chrome-dino-enamel-pin-ggoegcbb203299/.

4. En la barra de URL del navegador, reemplaza la ruta por lo siguiente:

   /ask_gemini?query=what is fallingwater

   La app responde con los resultados del agente que recuperó una respuesta de la API de Wikipedia que configuraste en el notebook.

   Fallingwater was designed by architect Frank Lloyd Wright in 1935. It is located in southwest Pennsylvania, about 70 miles southeast of Pittsburgh. The house is famous because it was built partly over a waterfall. Nota: La respuesta real que recibas puede ser diferente de las que se muestran arriba.

Tarea 6: Prueba Gemini 2.0 Flash

Ahora que desarrollaste y también implementaste tu app de backend, los componentes de Vertex AI Search y un agente de Reasoning Engine, puedes comenzar a diseñar y compilar el frontend de Flutter.

La app de Flutter permite a los usuarios descubrir más información sobre las fotos que suben a la app. La app se integra con Gemini para generar respuestas sobre las fotos y usa un agente de IA para proporcionarlas a través de una interfaz de chat.

Antes de desarrollar la app de frontend, debes definir la estructura de las respuestas que devuelve el modelo Gemini 2.0 Flash. El agente de IA que implementaste anteriormente en el lab usa este modelo.

En esta tarea, escribirás instrucciones para el modelo Gemini 2.0 Flash y verás su respuesta en formato JSON.

1. Gemini 2.0 Flash está disponible en Vertex AI Studio en la consola de Cloud. Para acceder a Vertex AI Studio, haz clic en el menú de navegación () y, luego, selecciona Vertex AI > Crear instrucción (en Vertex AI Studio).

2. Si se te solicita que habilites las APIs necesarias para usar Vertex AI Studio, haz clic en Aceptar y continuar.

   Nota: Vertex AI Studio es una herramienta de la consola de Google Cloud que te permite probar y crear prototipos de modelos de IA generativa con rapidez para que puedas aprovechar sus capacidades en tus aplicaciones.

3. En Instrucción, haz clic en Insertar contenido multimedia y, luego, selecciona Importar desde Cloud Storage.

   

4. Haz clic en > junto al nombre del bucket del lab .

5. Selecciona el archivo de imagen fallingwater.jpg y, luego, haz clic en Seleccionar.

   La imagen se sube al cuadro de instrucción.

6. Para enviar una instrucción al modelo, escribe What is this? en el cuadro de instrucción que se encuentra debajo de la imagen y, luego, haz clic en Enviar ().

   El modelo proporciona una respuesta breve que describe correctamente el objeto en la imagen.

7. Para recuperar más información del modelo en formato JSON, modifica la instrucción de texto. Para editar la instrucción, desplázate a la parte superior del panel de instrucciones y haz clic en Editar. Actualiza el texto de la instrucción a lo siguiente:

   What is this? Provide the name and description of the object, and be as specific as possible. Also include a list of 3 follow-up questions that I can ask for more information about this object. Generate the response in JSON format with the keys "name", "description", and "suggestedQuestions".

8. Haz clic en Enviar ().

9. Visualiza la respuesta en formato JSON que genera el modelo.

   { "name": "Fallingwater", "description": "This is Fallingwater, a house designed by renowned architect Frank Lloyd Wright. It's built over a waterfall on Bear Run in rural southwestern Pennsylvania, and is considered a masterpiece of organic architecture, seamlessly blending with its natural surroundings.", "suggestedQuestions": [ "Who commissioned Frank Lloyd Wright to design Fallingwater?", "What are some of the key architectural features of Fallingwater?", "Is Fallingwater open to the public, and if so, how can I visit?" ] }

   Ahora tienes una instrucción y una respuesta del modelo en formato JSON que podemos usar para compilar tu app de Flutter.

   Nota: La respuesta del modelo que recibas podría diferir de la respuesta que se muestra anteriormente.

Tarea 7. Implementa la app de frontend de Flutter

Ahora que tienes la estructura de los datos que devuelve el modelo, puedes compilar la app de frontend.

Flutter es un framework de desarrollo de apps multiplataforma de código abierto. Te permite escribir una base de código que se ejecuta en Android, iOS, macOS, Windows, Linux y la Web. Las apps de Flutter se desarrollan en el lenguaje de programación Dart.

Para los fines de este lab, usarás la Web como plataforma de destino, de modo que la app de Flutter se pueda implementar como una aplicación web y se pueda acceder a ella a través de un navegador.

En esta tarea, revisarás el código de la app de Flutter y, luego, compilarás y ejecutarás la app como una aplicación web.

Revisa la base de código de la app de Flutter

Una de las funciones de la app permite a los usuarios subir una foto de un atractivo turístico y, luego, consultar a Gemini para obtener información sobre la imagen. Para este lab, la app de Flutter se desarrolló y se puso a disposición en Cloud Storage.

1. En la terminal del IDE, descarga el código de la app de Flutter:

   gcloud storage cp -r gs://cloud-training/OCBL453/photo-discovery/app ~

2. Para recuperar las dependencias del proyecto de la app, ejecuta lo siguiente en la ventana de terminal del IDE:

   cd ~/app; flutter pub get

3. Para ver el código en el IDE, en el menú de navegación (), haz clic en File y, luego, selecciona Open Folder.

4. Selecciona /home/ide-dev/app/ de la lista y, luego, haz clic en Ok.

5. Para confirmar que confías en los autores de los archivos de la carpeta, haz clic en Yes, I trust the authors.

   Esta es una descripción general del contenido de la carpeta app:

   Carpeta/archivo	Descripción
   app	La carpeta raíz del proyecto que contiene las subcarpetas y los archivos que componen la app de Flutter.
   android/ios/linux/macos/web/windows	Contiene archivos específicos de la plataforma que se necesitan para ejecutar la app de Flutter en cada plataforma compatible.
   lib	Contiene los archivos de Dart principales de la aplicación que incluyen la funcionalidad, el enrutamiento, los modelos de datos y la interfaz de usuario.
   test	Contiene pruebas de Dart que se usan para probar los widgets de la app.
   pubspec.yaml	Contiene las dependencias de la app, la versión de Flutter y otros parámetros de configuración.
   analysis_options.yaml	Contiene parámetros de configuración para el análisis estático de la app.

   Revisemos algunos de los archivos de estas carpetas.

6. En el menú Explorador, haz clic en la carpeta /app/lib/models y, luego, en el archivo metadata.dart para abrirlo.

   El archivo metadata.dart contiene el modelo de datos que usa la app de Flutter.

   class Metadata { String name = ''; String description = ''; List suggestedQuestions = []; // more code follows ... }

   Los atributos del objeto de metadatos se asignan a los atributos JSON que se devuelven en la respuesta de la API de Gemini. Cuando se invoca, el método fromJson inicializa los atributos del objeto.

7. En el menú Explorador, haz clic en el archivo /app/lib/main.dart para abrirlo.

   Este es el punto de entrada de la app de Flutter. Después de realizar las tareas de inicialización, el código de este archivo crea la IU de la app con componentes de Material y establece el título, el tema y la configuración de enrutamiento de la app.

   Nota: Una app de Material comienza con el widget MaterialApp, que crea una serie de widgets útiles en la raíz de la app, incluido un navegador que administra el enrutamiento a varias pantallas de la app.

8. Para ver la configuración de enrutamiento de la app, en el menú Explorador, haz clic en el archivo /app/lib/functionality/routing.dart para abrirlo.

   El código de este archivo define las rutas /, /chat y /settings de la app.

   Flutter usa el concepto de widgets, que son clases declarativas que se utilizan para desarrollar la app. En Flutter, creas un diseño generando widgets para crear widgets más complejos y formar un árbol de widgets. Para obtener más información sobre cómo crear IU en Flutter, consulta la documentación.

9. Revisemos el código que es responsable de algunas de las pantallas de la IU y la funcionalidad de la app. En el menú Explorador, haz clic en el archivo /app/lib/ui/screens/quick_id.dart para abrirlo.

   Este archivo contiene las clases que crean los widgets de la app. Incluye la clase GenerateMetadataScreen que crea la página principal de la app y se invoca desde la ruta / que se define en el archivo routing.dart. La IU permite que el usuario suba una imagen desde su computadora o dispositivo móvil o tome una foto con la cámara del dispositivo.

   

   Otras pantallas de IU que se usan en la app son para la configuración y la página de chat, que se implementan en los archivos settings.dart y chat.dart de la carpeta app/lib/ui/screens/.

   Durante la inicialización de la app, el SDK de Dart de Vertex AI para Firebase se usa para recuperar una instancia del modelo de IA generativa de Gemini que usará la app. Esto se implementa en la clase _GenerateMetadataScreenState.

   void initState() { super.initState(); model = FirebaseVertexAI.instance.generativeModel( model: geminiModel, generationConfig: GenerationConfig( temperature: 0, responseMimeType: 'application/json', ), ); }

   Después de que el usuario selecciona una imagen, la app invoca la API de Gemini de Vertex AI con la imagen y una instrucción de texto. La instrucción de texto que se usa es la misma que probaste en una tarea anterior cuando realizaste la prueba del modelo Gemini 2.0 Flash.

   El método _sendVertexMessage() contiene el código que envía la instrucción. Este es un fragmento de código del método:

   Future _sendVertexMessage() async { ... final messageContents = Content.multi( [ TextPart( 'What is the subject in this photo? Provide the name of the photo subject, and description as specific as possible, and 3 suggested questions that I can ask for more information about this object. Answer in JSON format with the keys "name", "description" and "suggestedQuestions".'), DataPart('image/jpeg', _image!), ], ); var response = await model.generateContent([messageContents]); var text = response.text; if (text == null) { _showError('No response from API.'); return; } else { var jsonMap = json.decode(text); if (mounted) { context.read().updateMetadata(Metadata.fromJson(jsonMap)); } } ... }

   La respuesta JSON del modelo se decodifica para extraer name, description y suggestedQuestions, que se guardan de forma local y se muestran en la IU de la app.

Conecta la app de Flutter a Firebase

1. En la ventana de terminal del IDE, cambia a la carpeta raíz del proyecto app y activa el paquete flutterfire_cli:

   cd ~/app dart pub global activate flutterfire_cli

2. Para registrar tu app de Flutter en Firebase, ejecuta lo siguiente:

   flutterfire configure --project={{{project_0.project_id|set at lab start}}}

   Después de ejecutar el comando, se agrega un archivo de configuración firebase_options.dart a la carpeta lib de tu proyecto de Flutter.

3. Para configurar las plataformas compatibles con la app, presiona la barra espaciadora para anular la selección de todas las plataformas, excepto la Web. Desplázate por las plataformas con la tecla de flecha. Luego, presiona Intro.

   Tu app web de Flutter ahora está registrada para usarse con Firebase.

Configura la función de chat de la app de Flutter

La app de Flutter tiene una función de chat que permite a los usuarios obtener más información sobre la imagen que subieron a la app. También pueden solicitar información de otras fuentes de datos externas que podrían tener información más actualizada. Para ello, necesitamos una forma de conectar o vincular el modelo de Gemini a esas fuentes de datos.

Para implementar esta función, la app de Flutter se integra con el agente de Reasoning Engine que implementaste anteriormente en este lab. La integración se logra conectando la app de Flutter al extremo de la app de backend que también compilaste y que implementaste en Cloud Run.

1. Primero, recupera el nombre de host del extremo de Cloud Run de la app de backend y almacena el valor en una variable de entorno. En la ventana de terminal del IDE, ejecuta lo siguiente:

   BACKEND_APP_HOST=$(gcloud run services describe ag-web --region {{{project_0.default_region|set at lab start}}} --format 'value(status.url)' | cut -d'/' -f3); echo $BACKEND_APP_HOST

2. Para la app de Flutter, el endpoint de la app de backend se configura en el archivo ~/app/lib/config.dart. Actualiza la entrada de configuración en el archivo:

   sed -i "s/cloudRunHost = .*/cloudRunHost = '$BACKEND_APP_HOST';/" ~/app/lib/config.dart

3. Para verificar el cambio, en el menú Explorador del IDE, haz clic en el archivo IDE-DEV/app/lib/config.dart para abrirlo. Verifica que el valor de entrada de configuración cloudRunHost esté actualizado según el ejemplo que aparece a continuación.

   

   Nota: El valor debe coincidir con el valor de la variable de entorno `BACKEND_APP_HOST` que configuraste en un paso anterior.

Revisa el código de la función de chat

Revisemos el código de la app de Flutter que implementa la función de chat.

1. En el menú Explorador del IDE, haz clic en el archivo /app/lib/ui/screens/chat.dart para abrirlo.

   La clase ChatPage crea el widget de Flutter para la página de chat en la IU. Esta página se muestra en la IU cuando se presiona el botón Tell me more.

   

   Para compilar la IU del chat, la app utiliza el paquete flutter_chat_ui_package que implementa la mayor parte del código estándar del chat que puedes personalizar. El método build() usa la clase Chat para construir el widget.

   Widget build(BuildContext context) { ... Chat( typingIndicatorOptions: TypingIndicatorOptions( typingUsers: typingUsers, ), listBottomWidget: suggestionsWidget, messages: _messages, onSendPressed: _handleSendPressed, showUserAvatars: true, showUserNames: true, user: _user, theme: DefaultChatTheme( receivedMessageBodyTextStyle: TextStyle( color: Theme.of(context).colorScheme.onSurface, ), sentMessageBodyTextStyle: TextStyle( color: Theme.of(context).colorScheme.onSecondary, ), userAvatarNameColors: [ Theme.of(context).colorScheme.primary, ], backgroundColor: Theme.of(context).colorScheme.surfaceContainerHigh, primaryColor: Theme.of(context).colorScheme.primary, secondaryColor: Theme.of(context).colorScheme.surface, ), ), ... }

   El widget listBottomWidget se usa para mostrar la lista de preguntas sugeridas que se devuelven en la respuesta de la llamada anterior de Gemini, lo que permite que el usuario seleccione una pregunta como mensaje de chat.

   El método de devolución de llamada _handleSendPressed() se invoca cuando el usuario hace clic en Enviar en la ventana de chat. El método construye un mensaje nuevo, lo agrega a la lista de mensajes y lo envía al backend con el método askAgent().

2. Desplázate por el código para encontrar el método askAgent().

   Para invocar a Gemini con el agente de Reasoning Engine, el método askAgent() envía una solicitud a la URL /ask_gemini en el extremo de Cloud Run de la app de backend. Los parámetros de consulta de la solicitud incluyen el name (nombre) y la description (descripción) de la imagen que se devolvieron en la llamada anterior a Gemini, además del mensaje del usuario.

   Future askAgent( String name, String description, String question) async { var query = 'The photo is $name. $description. $question.'; var endpoint = Uri.https(cloudRunHost, '/ask_gemini', {'query': query}); var response = await http.get(endpoint); if (response.statusCode == 200) { var responseText = convert.utf8.decode(response.bodyBytes); return responseText.replaceAll(RegExp(r'\*'), ''); } return 'Sorry I can\'t answer that.'; }

   La respuesta del backend se agrega a la lista de mensajes en la ventana de chat con la función de llamada _sendMessageToAgent().

Implementa la app de Flutter

Ahora que la configuración de la app de Flutter está completa, puedes compilar y, posteriormente, implementar la app. En el caso de este lab, para ejecutar la app como una aplicación web usamos Fwr, que es un servidor de desarrollo para Flutter web.

1. Asegúrate de estar en la carpeta de la app de Flutter. En la ventana de terminal del IDE, ejecuta lo siguiente:

   cd ~/app

2. Ejecuta lo siguiente para recuperar las dependencias del proyecto de la app:

   flutter pub get

3. Para compilar el proyecto y, luego, iniciar el servidor web, ejecuta lo siguiente:

   fwr

   Espera a que el servidor se inicie y entregue la app de Flutter. Una vez que se inicie, el resultado del comando debería ser similar a lo siguiente:

   

Para verificar este objetivo, haz clic en Revisar mi progreso. Configurar el proyecto de Firebase y la app de Flutter

Tarea 8. Prueba la app de Flutter

Probemos la funcionalidad de la app de Flutter.

Descarga imágenes de prueba

1. Para probar la app, primero descarga y guarda una imagen en tu computadora. Copia la URL para ver la imagen en una pestaña diferente del navegador:

   Imagen de la Casa de la Cascada (Fallingwater)

2. Haz clic con el botón derecho en la imagen y guárdala en tu computadora.

3. Repite estos pasos para descargar una imagen del pin del juego del dinosaurio de Chrome desde la siguiente URL:

   Imagen de pin del juego del dinosaurio de Chrome

Prueba la app

1. Para acceder a la app de Flutter, copia la URL de Live Server del panel de credenciales de Qwiklabs y ábrela en una nueva pestaña de la ventana de incógnito del navegador.

2. Espera unos segundos para que se cargue la app. Luego, para subir la imagen de la Casa de la Cascada, haz clic en Choose from Library.

   Después de subir la imagen, la app invoca la API de Gemini de Vertex AI para generar una respuesta que contiene el nombre y la descripción de la imagen, que se muestran en la IU de la app.

   

   Es posible que los campos de nombre y descripción de la IU de la app tarden unos segundos en completarse a partir de la respuesta del modelo de Gemini.

   Nota: Si recibes un error de permiso denegado, ignóralo y haz clic en el botón para aceptar y continuar. Haz clic en Remove image y vuelve a subir la imagen.

3. Haz clic en Tell me more.

   La página de chat se carga y muestra las preguntas sugeridas que se devolvieron en la respuesta de la llamada anterior a la API de Gemini.

   

   Nota: Si no se muestran las preguntas sugeridas, actualiza la página y, luego, repite los dos pasos anteriores para subir la imagen.

Prueba la app con datos de artículos promocionales

1. En la IU del chat, haz clic en Remove image.

2. Para subir la imagen del pin del juego del dinosaurio de Chrome, haz clic en Choose from Library y sube la imagen que guardaste anteriormente.

   Después de subir la imagen, la app invoca la API de Gemini de Vertex AI para generar una respuesta que contiene el nombre y la descripción de la imagen, que se muestran en la IU de la app.

3. Haz clic en Tell me more.

4. En el cuadro de mensaje del chat, escribe lo siguiente:

   Where can I buy this pin?

   El agente realiza una llamada HTTPS al extremo de Cloud Run de la app de backend, que luego invoca al agente de Reasoning Engine que usa Gemini para devolver una respuesta del almacén de datos de Vertex AI Search.

   

5. (Opcional) Para ver cómo se ajusta la app de Flutter en un diseño destinado a dispositivos móviles, cambia el tamaño de la ventana del navegador para que tenga aproximadamente el tamaño de un dispositivo móvil:

   

   Esto indica que la app de Flutter es responsiva a los cambios en función del tamaño de la pantalla o la ventana. Flutter tiene widgets y paquetes que ayudan a que tu app sea responsiva y se adapte a los cambios según la configuración del dispositivo.

Finalice su lab

Cuando haya completado su lab, haga clic en Finalizar lab. Qwiklabs quitará los recursos que usó y limpiará la cuenta por usted.

Tendrá la oportunidad de calificar su experiencia en el lab. Seleccione la cantidad de estrellas que corresponda, ingrese un comentario y haga clic en Enviar.

La cantidad de estrellas indica lo siguiente:

• 1 estrella = Muy insatisfecho
• 2 estrellas = Insatisfecho
• 3 estrellas = Neutral
• 4 estrellas = Satisfecho
• 5 estrellas = Muy satisfecho

Puede cerrar el cuadro de diálogo si no desea proporcionar comentarios.

Para enviar comentarios, sugerencias o correcciones, use la pestaña Asistencia.

¡Felicitaciones!

En este lab, aprendiste a hacer lo siguiente:

• Creaste un almacén de datos de búsqueda y una app de búsqueda con Vertex AI Agent Builder en la consola de Google Cloud.
• Implementaste un agente de Reasoning Engine con Vertex AI Workbench.
• Compilaste una app de Python que se integra con Vertex AI Search y el agente de Reasoning Engine.
• Implementaste la app en Cloud Run y la utilizaste como backend para una app de Flutter.
• Configuraste un proyecto de Firebase y lo conectaste a la app de Flutter.
• Visualizaste el código de la app de Flutter para comprender parte de la funcionalidad.
• Ejecutaste y pusiste a prueba la app de Flutter.

Próximos pasos/Más información

• Descripción general de Gemini para Google Cloud
• Vertex AI Workbench
• Vertex AI Studio
• Firebase

Copyright 2024 Google LLC. Todos los derechos reservados. Google y el logotipo de Google son marcas de Google LLC. El resto de los nombres de productos y empresas pueden ser marcas de las respectivas empresas a las que están asociados.