Acerca de este codelab
1. Descripción general
En este lab, usarás los productos de IA generativa de Google para crear infraestructura en Google Cloud con la ayuda de Gemini Cloud Assist, consultar datos de BigQuery con lenguaje natural a las funciones de SQL de Data Canvas, escribir código en notebooks de Jupyter de Colab Enterprise y en Eclipse Theia (Visual Studio Code) con la ayuda de Gemini Code Assist, y también integrarás funciones de búsqueda y chat de IA compiladas en Cloud Storage y fuentes de puesta a tierra de BigQuery en Vertex AI Agent Builder.
Nuestro objetivo es crear un sitio web de recetas y cocina llamado AI Recipe Haven. El sitio se compilará en Python y Streamlit, y contendrá dos páginas principales. Cooking Advice alojará un chatbot que crearemos con Gemini y una fuente basada en Vertex AI Agent Builder vinculada a un grupo de libros de recetas. Ofrecerá consejos de cocina y responderá preguntas relacionadas con la cocina. Recipe Search será un motor de búsqueda alimentado por Gemini, esta vez basado en una base de datos de recetas de BigQuery.
Si tienes problemas con alguno de los códigos de este ejercicio, las soluciones para todos los archivos de código se encuentran en el repositorio de GitHub del ejercicio, en la rama solution.
Objetivos
En este lab, aprenderás a realizar las siguientes tareas:
- Activa y usa Gemini Cloud Assist
- Crea una app de búsqueda en Vertex AI Agent Builder para el chatbot de consejos de cocina
- Carga y limpia datos en un notebook de Colab Enterprise con la ayuda de Gemini Code Assist
- Crea una app de búsqueda en Vertex AI Agent Builder para el generador de recetas
- Define la aplicación web principal de Python y Streamlit con un poco de ayuda de Gemini
- Implementa la aplicación web en Cloud Run
- Conecta la página de Cooking Advice a nuestra app de Agent Builder de búsqueda de libros de recetas
- (Opcional) Conecta la página de búsqueda de recetas a la app de Agent Builder de búsqueda de recetas
- Explora la aplicación final (opcional)
2. Configuración y requisitos
Antes de hacer clic en el botón Comenzar lab
Lee estas instrucciones. Los labs son cronometrados y no se pueden pausar. El cronómetro, que comienza a funcionar cuando haces clic en Comenzar lab, indica por cuánto tiempo tendrás a tu disposición los recursos de Google Cloud.
Este lab práctico de Qwiklabs le permitirá llevar a cabo las actividades correspondientes en un entorno de nube real, no en uno de simulación o demostración. Para ello, le proporciona credenciales temporales nuevas que utilizará para acceder a Google Cloud durante todo el lab.
Qué necesitas
Para completar este lab, necesitarás lo siguiente:
- Acceso a un navegador de Internet estándar (se recomienda el navegador Chrome)
- Tiempo para completar el lab
Nota: Si ya tiene un proyecto o una cuenta personal de Google Cloud, no los use para este lab.
Nota: Si utilizas una Pixelbook, abre una ventana de incógnito para ejecutar este lab.
Cómo iniciar su lab y acceder a la consola de Google Cloud
- Haz clic en el botón Comenzar lab. Si debes pagar por el lab, se abrirá una ventana emergente para que selecciones tu forma de pago. A la izquierda, verás un panel con las credenciales temporales que debes usar para este lab.
- Copia el nombre de usuario y, luego, haz clic en Abrir la consola de Google. El lab inicia recursos y abre otra pestaña que muestra la página de acceso.
Sugerencia: Abra las pestañas en ventanas separadas, una junto a la otra.
Si ves la página Elige una cuenta, haz clic en Usar otra cuenta.
- En la página Acceder, pega el nombre de usuario que copiaste del panel Detalles de la conexión. Luego, copie y pegue la contraseña.
Importante: Debe usar las credenciales del panel Detalles de conexión. No use sus credenciales de Qwiklabs. Si tiene una cuenta propia de Google Cloud, no la utilice para este lab a fin de no incurrir en cargos. 4. Haga clic para avanzar por las páginas siguientes:
- Acepta los Términos y Condiciones.
- No agregues opciones de recuperación o autenticación de dos factores (esta es una cuenta temporal).
- No se registre para obtener pruebas gratuitas.
Después de un momento, se abrirá la consola de Cloud en esta pestaña.
Nota: Para ver el menú con una lista de productos y servicios de Google Cloud, haz clic en el menú de navegación que se encuentra en la parte superior izquierda.
3. Tarea 0: Verifica tu clúster de Workstation
Más adelante en este lab, usarás una estación de trabajo de Google Cloud para realizar algunas tareas de desarrollo. El proceso de inicio de este lab debería haber comenzado la creación del clúster de tu estación de trabajo. Antes de continuar, asegúrate de que el clúster se esté compilando.
- En la consola de Google Cloud, usa el cuadro de búsqueda para navegar a Cloud Workstations.
- Usa el menú de navegación de la izquierda para ver Administración de clústeres.
- Si tienes un clúster que se está actualizando, puedes continuar con la tarea 1. Si no ves ningún clúster en ningún estado, actualiza la página. Si aún no ves un clúster que se esté actualizando (compilando), finaliza el lab con el botón que se encuentra en la parte superior izquierda de estas instrucciones y reinícialo.
4. Tarea 1. Activa y usa Gemini Cloud Assist
En esta tarea, activaremos y usaremos Gemini Cloud Assist. Mientras trabajas en la consola de Google Cloud, Gemini Cloud Assist puede ofrecerte consejos, ayudarte a compilar, configurar y supervisar tu infraestructura de Google Cloud, y hasta sugerirte comandos gcloud
y escribir secuencias de comandos de Terraform.
- Para activar Cloud Assist y comenzar a usarlo, haz clic en el cuadro de búsqueda en la parte superior de la IU de Cloud Console y selecciona Ask Gemini (o el texto podría ser Ask Gemini for Cloud console).
- Desplázate hasta la sección API requerida de la página y Habilita la API de Gemini para Google Cloud.
- Si no ves una interfaz de chat de inmediato, haz clic en Empieza a chatear. Comienza por pedirle a Gemini que explique algunos de los beneficios de usar Cloud Workstations. Tómate unos minutos para explorar la respuesta generada.
- A continuación, pregunta sobre los beneficios de Agent Builder y cómo puede ayudar a fundamentar las respuestas generativas.
- Por último, veamos una comparación. En la ventana de chat de Gemini de la consola de Google Cloud, haz la siguiente pregunta:
What are the major steps to creating a search app grounded in a
GCS data source using Vertex AI Agent builder?
- Ahora, en una ventana que no sea de incógnito, ve al sitio web público de Gemini aquí, accede si es necesario y haz la misma pregunta. ¿Las respuestas son iguales o al menos similares? ¿Cuáles son los pasos específicos? ¿Alguna de ellas es notablemente mejor? De cualquier manera, ten en cuenta las respuestas mientras seguimos con los próximos pasos.
Nota: Si intentas realizar el paso anterior con tu cuenta temporal de Qwiklabs, se te bloqueará. Si tu cuenta de trabajo también está bloqueada porque tu organización no permite el uso de la app web de Gemini, simplemente omite el paso y continúa. Esto no afectará tu capacidad para completar este ejercicio.
5. Tarea 2: Crea una app de búsqueda en Vertex AI Agent Builder para el chatbot de consejos de cocina
El sitio web que estamos creando tendrá una página de consejos de cocina que contiene un chatbot diseñado para ayudar a los usuarios a encontrar respuestas a preguntas relacionadas con la cocina. Se basará en Gemini y en una fuente que contiene 70 libros de recetas de dominio público. Los libros de recetas actuarán como la fuente de información que usa Gemini para responder preguntas.
- Usa el cuadro de búsqueda de la consola de Cloud para navegar a Vertex AI. En el panel, haz clic en Habilitar todas las APIs recomendadas. Si aparece un cuadro emergente que indica que debes habilitar la API de Vertex AI, también habilítala.
- Usa la búsqueda para navegar a Agent Builder y, luego, Continuar y activar la API.
- Como sugirió Gemini en nuestra búsqueda de consejos anterior, crear una app de búsqueda en Agent Builder comienza con la creación de una fuente de datos confiable. Cuando el usuario realiza una búsqueda, Gemini comprende la pregunta y cómo redactar respuestas inteligentes, pero buscará la información que se usa en esa respuesta en la fuente basada, en lugar de extraerla de su conocimiento innato.
En el menú de la izquierda, navega a Almacenes de datos y, luego, a Crear almacén de datos. 4. Los libros de cocina de dominio público que usamos para fundamentar nuestra página de consejos de cocina se encuentran actualmente en un bucket de Cloud Storage en un proyecto externo. Selecciona el tipo de fuente de Cloud Storage. 5. Examina, pero no cambies las opciones predeterminadas relacionadas con el tipo de información que importaremos. Deja el tipo de importación establecido en Carpeta y, para la ruta de acceso del bucket, usa: labs.roitraining.com/labs/old-cookbooks
y, luego, Continuar. 6. Asigna el nombre old-cookbooks
al almacén de datos. Edita y cambia el ID a old-cookbooks-id
y Crea el almacén de datos.
Vertex AI Agent Builder admite varios tipos de apps, y el almacén de datos actúa como la fuente de información de cada una. Las apps de búsqueda son buenas para el uso general y la búsqueda. Las apps de chat son para flujos generativos en aplicaciones de chatbot o voicebot impulsadas por Dataflow. Las apps de recomendaciones ayudan a crear mejores motores de recomendaciones. Además, las apps de agentes se usan para crear agentes impulsados por IA generativa. Con el tiempo, es probable que el agente sea más útil para lo que queremos hacer, pero, como el producto está en versión preliminar, nos quedaremos con el tipo de app de búsqueda. 7. Usa el menú de la izquierda para navegar a Apps y, luego, haz clic en Crear aplicación. 8. Selecciona el tipo de app de Búsqueda. Examina las diferentes opciones, pero no las cambies. Asigna un nombre a la app: cookbook-search
. Edit y establece el ID de la app en cookbook-search-id
. Establece la empresa en Google
y haz clic en Continuar. 9. Revisa el almacén de datos old-cookbooks
que creaste hace unos pasos y crea la app de búsqueda.
Si examinas la pestaña Actividad, es probable que veas que los libros de recetas aún se están importando y indexando. Agent Builder tardará más de 5 minutos en indexar las miles de páginas contenidas en los 70 libros de recetas que le proporcionamos. Mientras funciona, carguemos y limpiemos algunos datos de la base de datos de recetas para nuestro generador de recetas.
6. Tarea 3: Carga y limpia datos en un notebook de Colab Enterprise con la ayuda de Gemini Code Assist
Google Cloud ofrece dos formas principales de trabajar con notebooks de Jupiter. Usaremos la oferta más reciente de Google, Colab Enterprise. Es posible que algunos de ustedes estén familiarizados con el producto Colab de Google, que suelen usar las personas y organizaciones que desean experimentar con notebooks de Jupiter en un entorno gratuito. Colab Enterprise es una oferta comercial de Google Cloud que está completamente integrada con el resto de los productos en la nube de Google y que aprovecha al máximo las capacidades de seguridad y cumplimiento del entorno de GCP.
Una de las funciones que ofrece Colab Enterprise es la integración con Gemini Code Assist de Google. La función de asistencia de código se puede usar en varios editores de código y puede ofrecer sugerencias intercaladas y sin inconvenientes mientras escribes código. Aprovecharemos este asistente generativo mientras organizamos nuestros datos de recetas.
- Usa la búsqueda para navegar a Colab Enterprise y Crear un notebook. Si recibes una oferta para experimentar con nuevas funciones de Colab, ignórala. Para que el entorno de ejecución, la potencia de procesamiento detrás de la notebook, esté listo, presiona Conectar en la esquina superior derecha de la notebook nueva.
- Usa el menú de tres puntos junto al nombre del notebook actual en el panel de archivos de Colab Enterprise para cambiarle el nombre a
Data Wrangling
.
- Crea un nuevo cuadro + Texto y usa la flecha hacia arriba para moverlo de modo que sea la primera celda de la página.
- Edita el cuadro de texto y escribe lo siguiente:
# Data Wrangling
Import the Pandas library
- En el bloque de código debajo del bloque de texto que acabas de crear, comienza a escribir imp y Gemini Code Assist debería sugerir el resto de la importación en gris. Presiona Tab para aceptar la sugerencia.
import pandas as pd
- Debajo del cuadro de código de importación, crea otro cuadro de texto y escribe lo siguiente:
Create a Pandas DataFrame from: gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv. View the first few records.
- Crea y edita otro bloque de código. Una vez más, comienza a escribir df y examina el código generado por Gemini Code Assistant. Si ves una lista desplegable de autocompletado de palabras clave de Python sobre la sugerencia generada, presiona Escape para ver el código sugerido en gris claro. Presiona Tab nuevamente para aceptar la sugerencia. Si tu sugerencia no contenía la llamada a la función head(), agrégala.
df = pd.read_csv('gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv')
df.head()
- Haz clic en la primera celda de código, en la que importaste Pandas, y usa el menú Commands o el teclado para ejecutar la celda seleccionada. En el teclado, Mayúsculas + Intro ejecutará la celda y cambiará el enfoque a la siguiente celda, y creará una si es necesario. Espera a que se ejecute la celda antes de continuar.
Nota: Verás [ ] a la izquierda cuando una celda no se haya ejecutado. Mientras se ejecuta una celda, verás una animación giratoria en funcionamiento. Una vez que termine la celda, aparecerá un número, como [13]. 9. Ejecuta la celda que carga el CSV en el DataFrame. Espera a que se cargue el archivo y examina las primeras cinco filas de datos. Estos son los datos de recetas que cargaremos en BigQuery y, con el tiempo, los usaremos para fundamentar nuestro generador de recetas. 10. Crea un nuevo bloque de código y escribe el siguiente comentario. Después de escribir el comentario, ve a la siguiente línea de código y deberías recibir la sugerencia df.columns
. Acepta la solicitud y, luego, ejecuta la celda.
# List the current DataFrame column names
Acabamos de demostrar que realmente tienes dos opciones para obtener ayuda de Gemini Code Assist en un notebook de Jupyter: celdas de texto sobre celdas de código o comentarios dentro de la celda de código. Los comentarios dentro de las celdas de código funcionan bien en los notebooks de Jupyter, pero este enfoque también funcionará en cualquier otro IDE que admita la asistencia de Gemini Code de Google.
- Hagamos un poco de limpieza de columnas. Cambia el nombre de la columna
Unnamed: 0
aid
y el delink
auri
. Usa la instrucción que elijas > técnicas de código para crear el código y, luego, ejecuta la celda cuando estés conforme.
# Rename the column 'Unnamed: 0' to 'id' and 'link' to 'uri'
df.rename(columns={'Unnamed: 0': 'id', 'link': 'uri'}, inplace=True)
- Quita las columnas
source
yNER
y usahead()
para ver las primeras filas. Una vez más, pídele ayuda a Gemini. Ejecuta las últimas dos líneas y examina los resultados.
# Remove the source and NER columns
df.drop(columns=['source', 'NER'], inplace=True)
df.head()
- Veamos cuántos registros hay en nuestro conjunto de datos. Una vez más, comienza con la técnica de instrucción que elijas y comprueba si puedes hacer que Gemini te ayude a generar el código.
# Count the records in the DataFrame
df.shape # count() will also work
- 2.23 millones de registros probablemente sean más recetas de las que tenemos tiempo para preparar. Es probable que el proceso de indexación en Agent Builder tarde demasiado para nuestro ejercicio de hoy. Como compromiso, tomemos una muestra de 150,000 recetas y trabajemos con eso. Usa tu instrucción > enfoque de código para tomar la muestra y almacenarla en un nuevo DataFrame llamado
dfs
(s para pequeño).
# Sample out 150,000 records into a DataFrame named dfs
dfs = df.sample(n=150000)
- Nuestros datos de fuente de recetas están listos para cargarse en BigQuery. Antes de realizar la carga, vamos a BigQuery y preparemos un conjunto de datos para contener nuestra tabla. En la consola de Google Cloud, usa el cuadro de búsqueda para navegar a BigQuery. Puedes hacer clic con el botón derecho en BigQuery y abrirlo en una pestaña nueva del navegador.
- Si aún no está visible, abre el panel de chat de Gemini AI con el logotipo de Gemini en la parte superior derecha de la consola de Cloud. Si se te solicita que habilites la API de nuevo, presiona Habilitar o actualiza la página. Ejecuta la instrucción:
What is a dataset used for in BigQuery?
Después de explorar la respuesta, pregunta lo siguiente:How can I create a dataset named recipe_data using the Cloud Console?
Compara los resultados con los siguientes pasos.
- En el panel Explorador de BigQuery, haz clic en el menú de tres puntos Ver acciones junto al ID de tu proyecto. Luego, selecciona Crear conjunto de datos.
- Proporciona el conjunto de datos y el ID de
recipe_data
. Deja el tipo de ubicación en EE.UU. y haz clic en Crear conjunto de datos. Si recibes un mensaje de error que indica que el conjunto de datos ya existe, simplemente continúa.
Con el conjunto de datos creado en BigQuery, volvamos a nuestro notebook y realicemos la inserción. 19. Regresa a tu notebook de Data Wrangling en Colab Enterprise. En una celda de código nueva, crea una variable llamada project_id
y úsala para contener el ID de tu proyecto actual. Busca en la parte superior izquierda de estas instrucciones, debajo del botón Finalizar lab, y encontrarás el ID del proyecto actual. También está en la página principal de la consola de Cloud si lo prefieres. Asigna el valor a la variable project_id
y ejecuta la celda.
# Create a variable to hold the current project_id
project_id='YOUR_PROJECT_ID'
- Usa el enfoque de instrucción > código para crear un bloque de código que inserte el DataFrame
dfs
en una tabla llamadarecipes
en el conjunto de datos que acabamos de crearrecipe_data
. Ejecuta la celda.
dfs.to_gbq(destination_table='recipe_data.recipes', project_id=project_id, if_exists='replace')
7. Tarea 4: Crea una app de búsqueda en Vertex AI Agent Builder para el generador de recetas
Excelente. Ahora que creamos nuestra tabla de datos de recetas, usémosla para crear una fuente de datos sólida para nuestro generador de recetas. El enfoque que usaremos será similar al que usamos para nuestro chatbot de cocina. Usaremos Vertex AI Agent Builder para crear un almacén de datos y, luego, usarlo como fuente de información de una app de búsqueda.
Si lo deseas, puedes pedirle a Gemini en la consola de Google Cloud que te recuerde los pasos para crear una app de búsqueda de Agent Builder, o bien puedes seguir los pasos que se indican a continuación.
- Usa la búsqueda para navegar a Agent Builder. Abre Almacenes de datos y Crear almacén de datos. Esta vez, selecciona el tipo de almacén de datos de BigQuery.
- En la celda de selección de la tabla, presiona Explorar y busca
recipes
. Selecciona el botón de selección junto a tu tabla. Si ves recetas de otros proyectos qwiklabs-gcp-…, asegúrate de seleccionar el que te pertenece.
Nota: Si haces clic en recipes
en lugar de seleccionar el botón de selección junto a él, se abrirá una pestaña nueva en tu navegador y se te dirigirá a la página de descripción general de la tabla en BigQuery. Solo cierra la pestaña del navegador y selecciona el botón de selección en el compilador de agentes. 3. Examina, pero no cambies el resto de las opciones predeterminadas y, luego, haz clic en Continuar. 4. En la página de revisión del esquema, examina las configuraciones predeterminadas iniciales, pero no cambies nada. Continuar 5. Asigna el nombre recipe-data
al almacén de datos. Edita el ID del almacén de datos y configúralo en recipe-data-id
. Crea el almacén de datos. 6. Navega a Apps en el menú de navegación de la izquierda y selecciona Crear aplicación. 7. Selecciona la app de Búsqueda una vez más. Asigna el nombre recipe-search
a la app y establece el ID en recipe-search-id
. Establece el nombre de la empresa como Google
y haz clic en Continuar. 8. Esta vez, revisa las fuentes de datos de recipe-data. Crea la app.
La indexación de nuestra tabla de base de datos llevará un tiempo. Mientras tanto, experimentemos con el nuevo lienzo de datos de BigQuery y veamos si podemos encontrar una o dos recetas interesantes. 9. Usa el cuadro de búsqueda para navegar a BigQuery. En la parte superior de BigQuery Studio, haz clic en la flecha hacia abajo junto a la pestaña de la derecha y selecciona Lienzo de datos. Establece la región en us-central1.
- En el cuadro de búsqueda del lienzo de datos, busca
recipes
y Agrega al lienzo tu tabla. - Se cargará una representación visual de tu tabla de recetas en el lienzo de datos de BigQuery. Puedes explorar el esquema de la tabla, obtener una vista previa de los datos y examinar otros detalles. Debajo de la representación de la tabla, haz clic en Consulta.
- El lienzo cargará un diálogo de consulta de BigQuery más o menos típico con una adición: sobre la ventana de consulta, hay un cuadro de texto que puedes usar para solicitar ayuda a Gemini. Veamos si podemos encontrar algunas recetas de pasteles en nuestro ejemplo. Ejecuta el siguiente mensaje (escribe el texto y presiona Intro para activar la generación de SQL):
Please select the title and ingredients for all the recipes with a title that contains the word cake.
- Observa el SQL generado. Cuando estés conforme, ejecuta la consulta.
- No está mal. No dudes en experimentar con algunas otras instrucciones y consultas antes de continuar. Cuando experimentes, prueba instrucciones menos específicas para ver qué funciona y qué no. Por ejemplo, esta instrucción:
Do I have any chili recipes?
(No olvides ejecutar la nueva consulta). Se muestra una lista de recetas de chili, pero no se incluyen los ingredientes hasta que la modifiqué de la siguiente manera:
Do I have any chili recipes? Please include their title and ingredients.
(Sí, digo “por favor” cuando hago una solicitud). Mi mamá estaría muy orgullosa).
Noté que una receta de chili contenía hongos. ¿Quién quiere eso en el chili? Le pedí a Gemini que me ayudara a excluir esas recetas.
Do I have any chili recipes? Please include their title and ingredients, and ignore any recipes with mushrooms as an ingredient.
8. Tarea 5. Define la aplicación web principal de Python y Streamlit con un poco de ayuda de Gemini
Con la indexación de nuestros dos almacenes de datos de Vertex AI Agent Builder y nuestras apps de búsqueda casi listas para lanzarse, comencemos a compilar nuestra aplicación web.
Aprovecharemos Gemini Code Assist mientras trabajamos. Para obtener más información sobre el uso de Gemini Code Assist en Visual Studio Code, consulta la documentación aquí.
Realizaremos nuestro desarrollo en una estación de trabajo de Google Cloud, un entorno de desarrollo basado en la nube que, en nuestro caso, está precargado con Eclipse Theia (Visual Studio Code de código abierto). Una secuencia de comandos automatizada en este ejercicio creó el clúster y la configuración de Cloud Workstation por nosotros, pero aún debemos crear la estación de trabajo en sí. Si quieres obtener más información sobre Cloud Workstations y su uso, consulta a Gemini Cloud Assist :-)
- Usa la búsqueda para navegar a Cloud Workstations y, luego, a Create Workstation. Asigna el nombre
dev-env
a la estación de trabajo y usa la configuración my-config. Crea la estación de trabajo. - Después de unos minutos, verás tu nueva estación de trabajo en la lista Mis estaciones de trabajo. Inicia
dev-env
y, una vez que esté en ejecución, inicia el entorno de desarrollo. - El editor de la estación de trabajo se abrirá en una nueva pestaña del navegador y, después de unos momentos, deberías ver una interfaz familiar de Theia (Visual Studio Code). En el lado izquierdo de la interfaz, expande la pestaña Control de código fuente y presiona Clonar repositorio.
- En la URL del repositorio, ingresa
https://github.com/haggman/recipe-app
. Clona el repositorio en tu carpetauser
y, luego, abre el repositorio clonado para editarlo. - Antes de explorar la carpeta clonada y comenzar a trabajar en nuestra aplicación web, debemos acceder a Google Cloud con el complemento Cloud Code del editor y habilitar Gemini. Hagámoslo ahora. En la parte inferior izquierda del editor, haz clic en Cloud Code - Acceder. Si no ves el vínculo, espera un minuto y vuelve a verificarlo.
- En la ventana de la terminal, se mostrará una URL larga. Abre la URL en el navegador y sigue los pasos para otorgarle acceso a Cloud Code a tu entorno de Google Cloud. Asegúrate de usar tu cuenta temporal de
student-...
de ejercicio y no tu cuenta personal de Google Cloud cuando realices la autenticación. En el diálogo final, copia el código de verificación y pégalo en la ventana de la terminal de espera en la pestaña del navegador de Cloud Workstation. - Después de unos momentos, el vínculo de Cloud Code en la parte inferior izquierda del editor cambiará a Cloud Code - No Project. Haz clic en el nuevo vínculo para seleccionar un proyecto. La paleta de comandos debería abrirse en la parte superior del editor. Haz clic en Seleccionar un proyecto de Google Cloud y selecciona tu proyecto qwiklabs-gcp-…. Después de unos momentos, el vínculo en la parte inferior izquierda del editor se actualizará para mostrar el ID de tu proyecto. Esto indica que Cloud Code se conectó correctamente a tu proyecto en funcionamiento.
- Con Cloud Code conectado a tu proyecto, ahora puedes activar Gemini Code Assist. En la parte inferior derecha de la interfaz del editor, haz clic en el logotipo de Gemini tachado. Se abrirá el panel de chat de Gemini a la izquierda del editor. Haz clic en Seleccionar un proyecto de Google Cloud. Cuando se abra la paleta de comandos, selecciona tu proyecto qwiklabs-gcp-…. Si seguiste los pasos correctamente (y Google no cambió nada), ahora deberías ver una ventana de chat de Gemini activa.
- Por último, configuremos la ventana de la terminal del editor de la misma manera. Usa el menú de opciones > Ver > Terminal para abrir la ventana de la terminal. Ejecuta
gcloud init
. Una vez más, usa el vínculo para permitir que la terminal de Cloud Shell funcione con tu proyectoqwiklabs-gcp-...
. Cuando se te solicite, selecciona la opción numérica de tu proyecto deqwiklabs-gcp-...
. - Excelente. Con la configuración de la terminal, el chat de Gemini y Cloud Code todo listo, abre la pestaña Explorer y tómate unos minutos para explorar los archivos del proyecto actual.
- En el Explorador, abre el archivo
requirements.txt
para editarlo. Cambia al panel de chat de Gemini y pregunta lo siguiente:
From the dependencies specified in the requirements.txt file, what type of application are we building?
- Por lo tanto, estamos compilando una aplicación web interactiva con Python y Streamlit que interactúa con Vertex AI y Discovery Engine. Genial. Por ahora, enfoquémonos en los componentes de la aplicación web. Como dice Gemini, Streamlit es un framework para compilar aplicaciones web basadas en datos en Python. Ahora pregunta lo siguiente:
Does the current project's folder structure seem appropriate for a Streamlit app?s
Aquí es donde Gemini suele tener problemas. Gemini puede acceder al archivo que tienes abierto en el editor, pero no puede ver todo el proyecto. Prueba preguntar lo siguiente:
Given the below, does the current project's file and folder structure seem appropriate for a Streamlit app?
- build.sh
- Home.py
- requirements.txt
- pages
-- Cooking_Advice.py
-- Recipe_Search.py
¿Obtuviste una respuesta mejor?
- Obtengamos más información sobre Streamlit:
What can you tell me about Streamlit?
Genial. Podemos ver que Gemini nos ofrece una buena descripción general, incluidos los pros y los contras.
- Si quieres explorar las desventajas, podrías preguntar lo siguiente:
What are the major downsides or shortcomings?
Ten en cuenta que no tuvimos que decir “de Streamlit” porque Gemini Chat es conversacional (de varios turnos). Gemini sabe de qué hablamos porque estamos en una sesión de chat. Si en algún momento quieres borrar el historial de chat de Gemini, usa el ícono de la papelera que se encuentra en la parte superior de la ventana de chat de código de Gemini.
9. Tarea 6: Implementa la aplicación web en Cloud Run
Excelente, tenemos nuestra estructura de aplicación principal, pero ¿funcionará todo? Mejor aún, ¿dónde deberíamos alojarlo en Google Cloud?
- En la ventana del chat de Gemini, pregunta lo siguiente:
If I containerize this application, what compute technologies
in Google Cloud would be best for hosting it?
- Recuerda que, si aún no trabajas en tu IDE, también puedes usar Google Cloud Assist. Abre la consola de Google Cloud y, luego, Gemini Cloud Assist, y pregunta lo siguiente:
If I have a containerized web application, where would be the
best place to run it in Google Cloud?
¿Los dos conjuntos de consejos fueron los mismos? ¿Estás de acuerdo o en desacuerdo con alguno de los consejos? Recuerda que Gemini es un asistente de IA generativa y, al igual que un asistente humano, no siempre estarás de acuerdo con todo lo que diga. Sin embargo, tener ese asistente siempre a tu lado mientras trabajas en Google Cloud y en tu editor de código puede ayudarte a ser mucho más eficiente.
- Para una aplicación web sin estado y de corta duración alojada en contenedores, Cloud Run sería una excelente opción. En la ventana de chat de Gemini de tu editor de código, prueba la siguiente instrucción:
What steps would be required to run this application in
Cloud Run?
- Parece que lo primero que debemos hacer es crear un Dockerfile. Con el editor, crea un archivo llamado
Dockerfile
en la raíz de la carpeta de tu proyecto. Asegúrate de no colocarlo accidentalmente en la carpeta de páginas. Abre el archivo para editarlo. - Usemos el panel lateral de Gemini Chat para crear nuestro
Dockerfile
. Usa una instrucción como la siguiente. Cuando los resultados se muestren en el chat, usa el signo + junto al ícono de copia justo encima del Dockerfile sugerido para insertar el código sugerido en el Dockerfile.
Create a Dockerfile for the application in the current folder.
The dependencies are defined in requirements.txt and I want you
to use the Python 3 slim bookworm base image.
Gemini no siempre muestra la misma respuesta a la misma instrucción. La primera vez que le pedí a Gemini un Dockerfile, obtuve el archivo exacto que te sugiero que uses. Acabo de recibir la siguiente sugerencia:
```docker
# Base image
FROM python:3-bookworm-slim
# Set working directory
WORKDIR /app
# Install dependencies
RUN apt-get update && apt-get install -y \
build-essential \
libpq-dev \
gcc \
python3-dev \
&& rm -rf /var/lib/apt/lists/*
# Install pip and virtualenv
RUN pip install --upgrade pip virtualenv
# Create virtual environment
RUN python3 -m venv venv
# Activate virtual environment
WORKDIR /app/venv/bin
RUN . activate
# Install Streamlit and libraries from requirements.txt
RUN pip install -r requirements.txt
# Copy application files
COPY . /app
# Expose port 8501 for Streamlit
EXPOSE 8501
# Start Streamlit app
CMD ["streamlit", "run", "main.py"]
That's a heck of a Dockerfile. I'd simplify it a bit. We don't need the apt-get section as anything needed for Python is already in our base image. Also, using a virtual environment in a Python container is a waste of space, so I'd remove that. The expose command isn't strictly necessary, but it's fine. Also, it's trying to start main.py which I don't have.
6. Tweak the Dockerfile so it resembles the following:
FROM python:3.11-slim-bookworm
WORKDIR /app
COPY requirements.txt . RUN pip install –no-cache-dir –upgrade pip &&
pip install –no-cache-dir -r requirements.txt
COPY . .
CMD ["streamlit", "run", "Home.py"]
7. We need a place in Google cloud where we can store our container image. Let's get a little help from Gemini. In the Google Cloud Console Gemini Cloud Assist ask:
¿Cuál es el mejor lugar de Google Cloud para almacenar imágenes de Docker?
8. If one of the answers you received is the Google Container Registry, then I guess Gemini hasn't gotten word that GCR is deprecated. Again, just like human assistants, you may get out of date or simply wrong answers (hallucinations). Always make sure to consider your choices carefully, even when Gemini is recommending something.
Let's go with Artifact Registry. Ask Gemini Cloud Assist how to create a docker registry in Artifact Registry named cooking-images.
How can I use gcloud to create a docker registry in Artifact Registry? (¿Cómo puedo usar gcloud para crear un registro de Docker en Artifact Registry?).
9. Now ask Gemini how you could use Cloud Build to build a new image named `recipe-web-app` from the Dockerfile in the current folder.
¿Cómo podría usar gcloud para compilar un nuevo servicio de Cloud Run llamado recipe-web-app a partir de una imagen del mismo nombre del repositorio de Artifact Registry que acabamos de crear?
10. To save you a little time, I've created a script that will create the Artifact Registry repo (if needed), use Cloud Build to build and push the image to the repo, and finally to deploy the application to Cloud Run. In your code editor use the **Explorer** view to open `build.sh` and explore the file.
11. Gemini can operate via the chat window, but it can also work directly in your code file using comments, like we used in the Data Wrangling notebook, and it also may be invoked using Control+i on Windows or Command+i on Mac. Click somewhere in the build.sh script file, activate Gemini using the appropriate Command+i / Control+i command.
<img src="img/61ac2c9a245a3695.png" alt="61ac2c9a245a3695.png" width="624.00" />
12. At the prompt enter the below. Examine and **Accept** the change.
Deja un comentario en el archivo actual.
How cool is that?! How many times have you had to work with someone elses code, only to have to waste time gaining a base understanding of their commentless work before you can even start making your changes. Gemini to the rescue!
13. Let's build and deploy our application. In the terminal window execute the `build.sh` file.
. build.sh
14. If you watch the build process, first it will build the Artifact Registry docker repo. Then, it uses Cloud Build to create the container image from the Dockerfile in the local folder (since we didn't supply a `cloudbuild.yaml`). Lastly, the docker image will be deployed into a new Cloud Run service. At the end of the script you'll get a Cloud Run test URL to use.
Open the returned link in a new tab of your browser. Take a moment and explore the application's structure and pages. Nice, now we need a hook in our generative AI functionality.
## Task 7: Connect the Cooking Advice page to our cookbook-search Agent Builder app
We have the framework for the web application running, but we need to connect the two work pages to our two Vertex AI Agent Builder search apps. Let's start with Cooking Advice.
1. In the Google Cloud console use search to navigate to **Chat** in Vertex AI.
2. In the right hand settings page pane set the model to **gemini-1.5-flash-002**. Slide the output token limit up to the max so the model can return longer answers if needed. Open the **Safety Filter Settings**. Set Hate speech, Sexually explicit content, and Harassment content to **Block some**. Set Dangerous content to **Block few** and **Save**. We're setting Dangerous Content a bit lower because talking about knives and cutting can be misinterpreted by Gemini as violence.
3. Slide on the toggle to enable **Grounding** then click **Customize**. Set the grounding source to **Vertex AI search** and for the datastore path use the following. Change YOUR_PROJECT_ID to the project ID found up near the End Lab button in these instructions, then **Save** the grounding settings
projects/YOUR_PROJECT_ID/locations/global/collections/default_collection/dataStores/old-cookbooks-id
**Note:** If you get an error then you either didn't change the project ID to your actual project ID, or you may have missed the step where you changed the old-cookbooks Agent Builder Data Store ID. Check your Agent Builder > Data Stores > old-cookbooks for its actual Data store ID.
4. Test a couple of chat messages. Perhaps start with the below. Try a few others if you like.
¿Cómo puedo saber si un tomate está maduro?
5. The model works, now let's experiment with the code. Click **Clear Conversation** so our conversations don't become part of the code then click **Get Code**.
<img src="img/dce8ad7ee006cca1.png" alt="dce8ad7ee006cca1.png" width="624.00" />
6. At the top of the code window, press Open Notebook so we can experiment and perfect the code in Colab Enterprise before integrating it into our app.
7. Take a few minutes to familiarize yourself with the code. Let's make a couple of changes to adapt it to what we want. Before we start, run the first code cell to connect to the compute and install the AI Platform SDK. After the block runs you will be prompted to restart the session. Go ahead and do that.
8. Move to the code we pulled out of Vertex AI Studio. Change the name of the method *multiturn_generate_content* to `start_chat_session`.
9. Scroll to the `model = GenerativeModel(` method call. The existing code defines the `generation_config` and `safety_settings` but doesn't actually use them. Modify the creation of the `GenerativeModel` so it resembles:
model = GenerativeModel( "gemini-1.5-flash-002", tools=tools, generation_config=generation_config, safety_settings=safety_settings, )
10. Lastly, add a final line to the method, just below `chat = model.start_chat()`, so the function returns the `chat` object. The finished function should look like the below.
**Note:** DO NOT COPY this code into your notebook. It is simply here as a sanity check.
def start_chat_session(): vertexai.init(project="qwiklabs-gcp-02-9a7298ceaaec", location="us-central1") tools = [ Tool.from_retrieval( retrieval=grounding.Retrieval( source=grounding.VertexAISearch(datastore="projects/qwiklabs-gcp-02-9a7298ceaaec/locations/global/collections/default_collection/dataStores/old-cookbooks-id"), ) ), ] model = GenerativeModel( "gemini-1.5-flash-002", tools=tools, generation_config=generation_config, safety_settings=safety_settings, ) chat = model.start_chat() return chat
11. Scroll to the bottom of the code cell and change the final line calling the old function so it calls the new function name and stores the returned object in a variable `chat`. Once you are satisfied with your changes, run the cell.
chat = start_chat_session()
12. Create a new code cell and add the comment `# Use chat to invoke Gemini and print out the response`. Move to the next line and type resp and Gemini should auto complete the block for you. Update the prompt to `How can I tell if a tomato is ripe?`. Run the cell
response = chat.send_message("How can I tell if a tomato is ripe?") print(response)
13. That's the response alright, but the part we really want is that nested text field. Modify the codeblock to print just that section, like:
response = chat.send_message("How can I tell if a tomato is ripe?") print(response.candidates[0].content.parts[0].text)
14. Good, now that we have working chat code, let's integrate it into our web application. Copy all the contents of the code cell that creates the `start_chat_session` function (we won't need the test cell). If you click into the cell you can click the triple dot menu in the upper right corner and copy from there
<img src="img/17bf8d947393d4b.png" alt="17bf8d947393d4b.png" width="326.00" />
15. Switch to your Cloud Workstation editor and open pages\Cooking_Advice.py for editing.
16. Locate the comment:
Agrega el código que copiaste de tu notebook debajo de este mensaje
17. Paste your copied code just below the above comment. Nice, now we have the section which drives the chat engine via a grounded call to Gemini. Now let's integrate it into Streamlit.
18. Locate section of commented code directly below the comment:
Este es el código para configurar tus variables de sesión
Quita el comentario de este bloque cuando se te indique.
19. Uncomment this section of code (Up till the next `Setup done, let's build the page UI` section) and explore it. It creates or retrieves the chat and history session variables.
20. Next, we need to integrate the history and chat functionality into the UI. Scroll in the code until you locate the below comment.
Este es el código para crear la interfaz de chat
Quita el comentario del siguiente código cuando se te indique.
21. Uncomment the rest of the code below the comment and take a moment to explore it. If you like, highlight it and get Gemini to explain its functionality.
22. Excellent, now let's build the application and deploy it. When the URL comes back, launch the application and give the Cooking Advisor page a try. Perhaps ask it about ripe tomatoes, or the bot knows a good way to prepare brussels sprouts.
. build.sh
How cool is that! Your own personal AI cooking advisor :-)
## Task 8: (Optional) Connect the Recipe Search page to the recipe-search Agent Builder app
When we connected the Cooking Advice page to its grounded source, we did so using the Gemini API directly. For Recipe Search, let's connect to the Vertex AI Agent Builder search app directly.
1. In your Cloud Workstation editor, open the `pages/Recipe_Search.py` page for editing. Investigate the structure of the page.
2. Towards the top of the file, set your project ID.
3. Examine the `search_sample` function. This code more or less comes directly from the Discovery Engine documentation [here](https://cloud.google.com/generative-ai-app-builder/docs/preview-search-results#genappbuilder_search-python). You can find a working copy in this notebook [here](https://github.com/GoogleCloudPlatform/generative-ai/blob/main/search/create_datastore_and_search.ipynb).
4. The only change I made was to return the `response.results` instead of just the results. Without this, the return type is an object designed to page through results, and that's something we don't need for our basic application.
5. Scroll to the very end of the file and uncomment the entire section below `Here are the first 5 recipes I found`.
6. Highlight the whole section you just uncommented and open Gemini Code chat. Ask, `Explain the highlighted code`. If you don't have something selected, Gemini can explain the whole file. If you highlight a section and ask Gemini to explain, or comment, or improve it, Gemini will.
Take a moment and read through the explanation. For what it's worth, using a Colab Enterprise notebook is a great way to explore the Gemini APIs before you integrate them into your application. It's especially helpful at exploring some of the newer APIs which may not be documented as well as they could be.
7. At your editor terminal window, run `build.sh` to deploy the final application. Wait until the new version is deployed before moving to the next step.
## Task 9: (Optional) Explore the final application
Take a few minutes to explore the final application.
1. In the Google Cloud console, use search to navigate to **Cloud Run**, then click into your **recipe-web-app**.
2. Locate the application test URL (towards the top) and open it in a new browser tab.
3. The application home page should appear. Note the basic layout and navigation provided by Streamlit, with the python files from the `pages` folder displayed as navigational choices, and the `Home.py` loaded as the home page. Navigate to the **Cooking Advice** page.
4. After a few moments the chat interface will appear. Again, note the nice core layout provided by Streamlit.
5. Try a few cooking related questions and see how the bot functions. Something like:
¿Tienes algún consejo para preparar el brócoli?
¿Qué tal una receta clásica de sopa de pollo?
Cuéntame sobre el merengue.
6. Now let's find a recipe or two. Navigate to the Recipe Search page and try a few searches. Something like:
Chili con carne
Chile, maíz y arroz
Pay de limón con merengue
Un postre que contiene fresas
## Congratulations!
You have created an application leveraging Vertex AI Agent Builder applications. Along the way you've explored Gemini Cloud Assist, Gemini Code Assist, and the natural language to SQL features of BigQuery's Data Canvas. Fantastic job!