Descripción general

La IA generativa es una tecnología que se puede usar para crear contenido como texto, videos, imágenes y código. Google Cloud ofrece una variedad de modelos de lenguaje grandes (LLM) y herramientas para ayudarte a comenzar a usar la IA generativa, como Gemini y Vertex AI. Puedes usar herramientas potenciadas por LLM para crear y mejorar el contenido de tus sitios web, y agregar experiencias de búsqueda conversacional. También puedes promover el descubrimiento de páginas web y mejorar la navegación en el sitio.

Objetivos

En este lab, implementarás una solución de modernización de sitios web para lo siguiente:

• Optimizar la generación de contenido con la IA generativa para mejorar la calidad y la eficiencia del contenido del sitio web
• Generar imágenes que complementen el contenido escrito de tu sitio web
• Traducir el contenido sin problemas al idioma deseado
• Mejorar el descubrimiento de información integrando Vertex AI Search en tu sitio web

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.

Active Cloud Shell

Cloud Shell es una máquina virtual que contiene herramientas de desarrollo y un directorio principal persistente de 5 GB. Se ejecuta en Google Cloud. Cloud Shell proporciona acceso de línea de comandos a sus recursos de Google Cloud. gcloud es la herramienta de línea de comandos de Google Cloud, la cual está preinstalada en Cloud Shell y es compatible con la función de autocompletado con tabulador.

1. En el panel de navegación de Google Cloud Console, haga clic en Activar Cloud Shell ().

2. Haga clic en Continuar.
   El aprovisionamiento y la conexión al entorno tardan solo unos momentos. Una vez que se conecte, también estará autenticado, y el proyecto estará configurado con su PROJECT_ID. Por ejemplo:

Comandos de muestra

• Si desea ver el nombre de cuenta activa, use este comando:

gcloud auth list

(Resultado)

Credentialed accounts: - <myaccount>@<mydomain>.com (active)

(Resultado de ejemplo)

Credentialed accounts: - google1623327_student@qwiklabs.net

• Si desea ver el ID del proyecto, use este comando:

gcloud config list project

(Resultado)

[core] project = <project_ID>

(Resultado de ejemplo)

[core] project = qwiklabs-gcp-44776a13dea667a6

Tarea 1. Habilita la API de Vertex AI

Antes de poder usar Vertex AI, debes habilitar su API.

1. Para hacerlo, ejecuta el siguiente comando en Cloud Shell:

   gcloud services enable aiplatform.googleapis.com

2. Si se te solicita, haz clic en Autorizar.

   Nota: Antes de verificar tu progreso, espera unos segundos para que se habilite la API.

Para verificar este objetivo, haz clic en Revisar mi progreso. Habilitar la API de Vertex AI

Tarea 2. Descarga el código del sitio web

En este lab, se usa una app de sitio web previamente compilada que consta de APIs de backend creadas con FastAPI, y un frontend compilado con HTML, CSS y JavaScript. En esta tarea, descargarás el código del sitio web y revisarás la estructura de archivos y código.

Descarga y visualiza el código del sitio web

1. En Cloud Shell, descarga el archivo de código del sitio web desde Cloud Storage:

   gcloud storage cp gs://cloud-training/OCBL451/genai-website-mod-app.tar.gz .

2. Extrae el contenido del archivo:

   tar -zxvf genai-website-mod-app.tar.gz

3. Para ver la estructura de archivos y el código del sitio web, haz clic en Abrir editor en la barra de menú de Cloud Shell.

4. En la barra de navegación del editor de Cloud Shell, expande la carpeta genai-website-mod-app.

   Esta carpeta contiene todos los archivos necesarios para compilar y, además, implementar la app del sitio web. Aquí hay una descripción general de los archivos y su propósito:

   Archivo/Carpeta	Descripción
   Dockerfile	Dockerfile para crear el contenedor de la aplicación del sitio web con Cloud Run
   config.toml	Configura la aplicación con variables
   main.py	Punto de entrada principal de FastAPI a la aplicación del sitio web
   models/	Carpeta que contiene los modelos de fechas que usa la aplicación del sitio web
   routers/	Routers de la API de FastAPI para diferentes funciones de la aplicación
   static/	Contiene recursos estáticos del sitio web, como archivos CSS, imágenes y JS
   templates/	Plantillas Jinja para las páginas de la aplicación del sitio web
   utils/	Módulos de utilidad para la aplicación del sitio web
   views/	Ver implementaciones de la aplicación del sitio web

   Nota: No es necesario que veas ni edites el contenido de los archivos, excepto en los pasos posteriores del lab.

Tarea 3. Implementa Vertex AI Search

En esta tarea, implementarás la capacidad de búsqueda para tu sitio web creando una aplicación de búsqueda en Vertex AI para buscar datos no estructurados, como entradas de blog.

Crea una aplicación de búsqueda

1. En la consola de Google Cloud, haz clic en el menú de navegación () y, luego, selecciona Agent Builder.

   Nota: Si Agent Builder no aparece en el menú de navegación, 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 Agent Builder.

2. Haz clic en Continue and activate the API.

3. Si se te redirecciona automáticamente a la página Crear app, ve al siguiente paso. De lo contrario, haz clic en Nueva app.

4. En la página Crear app, en Busca tu sitio web, haz clic en Crear.

5. En la página Configuración, configura una app de búsqueda genérica según estos parámetros y deja el resto de la configuración con los valores predeterminados:

   Propiedad	Valor (escríbelo o selecciónalo)
   Nombre de tu app	my-search-app
   Nombre externo de tu organización o empresa	my-company
   Ubicación de la app	global (Global)

6. Haz clic en Continuar.

Crea un almacén de datos para la app de búsqueda

1. En la página Almacenes de datos, haz clic en Crear almacén de datos.

   En esta página, configurarás tu app de búsqueda con tu propia fuente de datos para que se use en los resultados de la búsqueda de tu sitio web.

2. Selecciona Cloud Storage.

   Nota: Para este lab, se aprovisionaron preliminarmente algunos documentos HTML que representan entradas de blog en un bucket de Cloud Storage de tu proyecto.

3. Selecciona Carpeta como opción predeterminada y, luego, haz clic en Explorar.

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

5. Selecciona la carpeta blog_posts y, luego, haz clic en Seleccionar.

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

   

6. Para el tipo de datos que se importará, deja seleccionada la opción predeterminada Documentos no estructurados y, luego, haz clic en Continuar.

7. En el nombre del almacén de datos, escribe my-data-store.

8. Haz clic en Crear.

9. En la página Almacenes de datos, selecciona el almacén de datos que acabas de crear. Luego, haz clic en Crear (Create) para crear la app de búsqueda.

   

   Agent Builder ahora comienza a transferir los datos HTML de la entrada de blog desde tu bucket de Cloud Storage para tu app de búsqueda.

10. Para ver el estado de la transferencia de datos, en la página Datos de my-data-store, haz clic en la pestaña Actividad.

    La columna Estado indica el estado actual. Una vez que se complete el proceso de importación, la columna indicará Importación completada.

    

    Nota: El proceso de importación tarda unos minutos en completarse. Espera a que se complete el proceso de importación de datos antes de continuar con el siguiente paso.

11. Para verificar que los documentos se importaron correctamente, haz clic en la pestaña Documentos.

Prueba la app de búsqueda

Puedes obtener una vista previa de la app de búsqueda probando su funcionalidad en Agent Builder.

1. En el menú de navegación de Agent Builder, haz clic en Vista previa.

2. En el cuadro de búsqueda, escribe What is dollar cost averaging and how can it help me? (¿Qué es el promedio del costo en dólares y cómo puede ayudarme?) y presiona Intro.

   La app genera una respuesta que explica el promedio del costo en dólares y proporciona extractos y vínculos a los archivos pertinentes que se importaron desde Cloud Storage.

   Nota: De forma predeterminada, la app de búsqueda usa el modelo Gemini 1.5 Pro para generar respuestas de búsqueda. Puedes ver o modificar la configuración de la app de búsqueda en la página Agent Builder > Parámetros de configuración de la consola de Google Cloud.

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

Tarea 4. Integra la aplicación del sitio web con la búsqueda

Ahora que creaste la app de búsqueda, puedes integrarla en tu sitio web o aplicación. En este lab, se usa la API de búsqueda para hacer llamadas y recibir respuestas que se muestran en el sitio. También puedes incorporar un widget de búsqueda en tu sitio web que proporciona automáticamente una barra de búsqueda y una interfaz de búsqueda expandible. Para obtener más información sobre esta opción, sigue los vínculos que se encuentran al final del lab para ver la documentación.

En esta tarea, configurarás el código del sitio web para integrarlo en la app de búsqueda que creaste en la tarea anterior. Luego, implementarás la aplicación del sitio web en Cloud Run para probarla.

Configura la aplicación del sitio web

La aplicación del sitio web se compila con FastAPI, que es un framework web para compilar APIs en Python. La carpeta genai-website-mod-app/routers contiene las implementaciones de la API del router para varias funcionalidades del sitio web, como la búsqueda.

1. En el editor de Cloud Shell, navega a la carpeta genai-website-mod-app/routers y abre el archivo vertex_search.py.

   Este archivo contiene el código que implementa las llamadas a la API de búsqueda con el módulo discoveryengine del SDK del cliente de Cloud para Python. El código también usa tomllib, un módulo en Python que analiza archivos de configuración.

2. Visualiza el código en la función trigger_first_search().

   Esta función configura la llamada a la API de Discovery Engine con la ruta projects/{project_id}/locations/{datastore_location}/collections/default_collection/dataStores/{datastore_id}, que contiene parámetros de ruta.

3. Para proporcionar valores para los parámetros de ruta, en la carpeta genai-website-mod-app, edita el archivo config.toml.

4. En la sección [global], reemplaza los valores de las propiedades de configuración como se indica a continuación:

   Sección	Propiedad	Valor
   global	project_id
   global	location
   global	datastore_id	Consultar el siguiente paso

5. Reemplaza el valor de la propiedad de configuración datastore_id por el valor del ID de datastore de tu app de búsqueda:

   a. Para obtener el valor de datastore_id, navega a Agent Builder en la consola de Google Cloud y selecciona Datos.

   b. Copia y pega el valor ID del almacén de datos de my-data-store en el archivo config.toml.

6. Reemplaza las propiedades de configuración adicionales en las secciones de configuración correspondientes como se indica a continuación:

   Sección	Propiedad	Valor
   imagen	bucket_name
   blog	image_bucket
   blog	blog_bucket

7. Guarda los cambios realizados en el archivo.

Tarea 5. Compila, implementa y prueba el sitio web en Cloud Run

Cloud Run es una plataforma de procesamiento administrada que te permite ejecutar contenedores de aplicación sobre la infraestructura escalable de Google.

En esta tarea, compilarás la aplicación del sitio web y la implementarás en Cloud Run. También probarás la funcionalidad de búsqueda que integraste en el sitio web.

Configura el entorno

1. Asegúrate de estar en el directorio website application:

   cd ~/genai-website-mod-app

2. Establece variables de entorno para el ID del proyecto, la región y el servicio de la aplicación del sitio web:

   PROJECT_ID=$(gcloud config get-value project) REGION={{{project_0.default_region|set at lab start}}} SERVICE_NAME='webmod-svc' # Name of your Cloud Run service. echo "PROJECT_ID=${PROJECT_ID}" echo "REGION=${REGION}" echo "SERVICE_NAME=${SERVICE_NAME}"

Compila y, luego, implementa tu app en Cloud Run

1. Para compilar y, luego, implementar tu app en Cloud Run, ejecuta el siguiente comando:

   gcloud run deploy "$SERVICE_NAME" \ --port 8080 \ --source . \ --allow-unauthenticated \ --region $REGION \ --project $PROJECT_ID

2. Para crear el repositorio de Docker de Artifact Registry, escribe Y

   Después de implementar el servicio, se genera una URL del servicio en el resultado del comando.

Prueba la funcionalidad de búsqueda del sitio web

1. Para probar la app en Cloud Run, navega a la URL del servicio de Cloud Run de la aplicación del sitio web en una ventana o pestaña del navegador separada.

2. En el cuadro de búsqueda, escribe What is dollar cost averaging and how can it help me? (¿Qué es el promedio del costo en dólares y cómo puede ayudarme?) y presiona Intro.

3. Verifica que los resultados de la búsqueda se muestren en el sitio web.

   Nota: El resultado de la búsqueda incluye una respuesta de IA. Se genera a partir del contenido de los archivos HTML en el almacén de datos que aprovisionaste desde Cloud Storage para la app de búsqueda. En ocasiones, es posible que los vínculos de los resultados de la búsqueda no muestren un fragmento, aunque estén vinculados a la entrada de blog relacionada. Nota: Los archivos de la entrada de blog que usa el sitio web se almacenan como archivos JSON en una carpeta production separada en tu bucket de Cloud Storage. La aplicación del sitio web usa EditorJS para renderizar estos archivos como HTML para su visualización en el sitio web.

4. Para hacer una pregunta de seguimiento, escribe Can you use dollar cost averaging with ETFs? (¿Se puede usar el promedio del costo en dólares con los ETF?) en el cuadro de búsqueda y presiona Intro.

5. Verifica que los resultados de la búsqueda incluyan una respuesta a la pregunta de seguimiento, además de los vínculos correspondientes a las entradas de blog.

Para verificar este objetivo, haz clic en Revisar mi progreso. Implementar la aplicación del sitio web en Cloud Run

Tarea 6. Usa la IA generativa para editar el contenido del sitio web

Las herramientas de IA generativa de Google se pueden usar para crear y editar el contenido o el texto de un sitio web. En esta tarea, como editor de contenido de un sitio web, usarás estas herramientas para actualizar el contenido de texto y de imagen del sitio web que se usa en este lab.

Revisa el código de generación de imágenes

La aplicación del sitio web usa la API de Imagen en Vertex AI para generar y actualizar imágenes.

1. En el editor de código de Cloud Shell, abre el archivo de configuración config.toml.

2. Revisa las propiedades de configuración en la sección [imagen]. En esta sección, se definen las propiedades del modelo que se usarán para la generación de imágenes y la creación de leyendas, junto con algunas propiedades adicionales.

3. En el editor de Cloud Shell, abre el archivo routers/vertex_imagen.py.

   En este archivo, se definen las diferentes funciones de modificación y creación de leyendas de imágenes, junto con sus rutas de API.

4. Las funciones se implementan en el archivo utils/imagen.py. Abre este archivo en el editor de Cloud Shell.

5. Observa la función generate_image():

   En esta función, se usa la clase vertexai.preview.vision_models.ImageGenerationModel del paquete vertexai en el SDK de Python.

   Esta función primero carga el modelo de generación de imágenes y, luego, genera una imagen invocando la función generate_images() del modelo, en la que se pasa la instrucción de texto y otros parámetros.

Actualiza el contenido de imagen

Actualicemos una imagen en una de las entradas de blog del sitio web.

1. En la esquina superior derecha del sitio web de Cymbal Investments, haz clic en Todos los blogs.

   En el sitio web, se muestra una página con seis entradas de blog.

   Nota: Si las entradas de blog iniciales están seleccionadas de forma predeterminada, haz clic en cualquier parte de la página para anular la selección.

2. Haz clic en el vínculo para ver la primera entrada de blog: Unleashing the Techie Within: A Journey to FIRE.

   La página de la entrada de blog contiene un encabezado, una imagen y párrafos de texto.

3. Para editar el contenido de la página, haz clic en Editar () en la parte inferior derecha.

4. Coloca el cursor sobre la imagen. Luego, a la izquierda de la imagen, haz clic en Click to tune (Hacer clic para ajustar) ().

5. En el menú Click to tune (Hacer clic para ajustar), selecciona Generate (Generar).

   

6. En la leyenda de la foto, en Instrucción, escribe Una imagen de un hombre y una mujer jubilados sentados en una playa disfrutando de la puesta de sol. Haz clic en Generate (Generar).

7. Desplázate hasta la parte superior de la página y espera a que se genere la imagen.

   Se genera una imagen nueva, que luego se sube al bucket de imágenes de Cloud Storage. La página de la entrada de blog se actualiza con esta nueva imagen.

Contenido traducible

Puedes traducir páginas web completas o solo fragmentos de texto intercalado usando modelos de generación de texto. En esta subtarea, traducirás texto intercalado en la página del blog del sitio web.

1. En el editor de Cloud Shell, abre el archivo routers/vertex_llm.py.

   En este archivo, se definen las diferentes funciones de edición y traducción de páginas web, junto con sus rutas de API.

2. Desplázate hasta el final del archivo fuente y mira el código de la función ai_translate_inline().

   Esta función crea una instrucción con la propiedad de configuración ai_translate_inline_prompt, el texto que seleccionó el usuario y el idioma de destino que especificó el usuario. Luego, invoca la función llm_generate_gemini() para generar una respuesta del modelo.

   Este es el valor de la propiedad de configuración ai_translate_inline_prompt del archivo config.toml:

   Eres un escritor galardonado. INSTRUCCIONES: 1. Se te proporciona un fragmento de texto como INPUT_TEXT 2. También se te proporciona un idioma de destino como TARGET_LANGUAGE. 3. Debes traducir el INPUT_TEXT al TARGET_LANGUAGE. 4. Solo debes mostrar el texto traducido. No agregues ninguna otra explicación. No muestres la respuesta en \"\" (comillas dobles o simples). INPUT_TEXT:

3. Para ver la función llm_generate_gemini(), abre el archivo utils/vertex_llm_utils.py.

   En esta función, se usa la clase vertexai.generative_models.GenerativeModel del paquete vertexai en el SDK de Python.

   Esta función primero carga el modelo gemini-1.5-pro y, luego, genera una respuesta invocando la función generate_content() en el modelo, en la que se pasa la instrucción de texto y otros parámetros.

4. Asegúrate de estar en el modo de edición de la página del blog de tu sitio web. Si no es así, haz clic en Editar () en la parte inferior derecha.

5. Selecciona cualquiera de los párrafos de texto y, luego, haz clic en Herramienta de traducción:

   

6. En el campo de instrucción de idioma, escribe Francés y, luego, haz clic en Enviar.

   Después de unos segundos, el texto del párrafo se traduce al idioma que especificaste y se reemplaza intercalado en la página.

Actualiza el texto del sitio web (contenido de texto)

También puedes usar un modelo generativo para definir mejor el contenido de texto de tu sitio web.

1. En el archivo routers/vertex_llm.py, consulta la función ai_refine_text().

   Esta función crea una instrucción con la propiedad de configuración ai_refine_prompt, el texto seleccionado por el usuario del contenido del sitio web y las instrucciones de entrada del usuario.

   Este es el valor de la propiedad de configuración ai_refine_prompt del archivo config.toml:

   Eres un escritor galardonado. INSTRUCCIONES: 1. Se te proporciona un fragmento de texto como INPUT_TEXT 2. También se te proporcionan un estilo o tono o instrucciones como REFINE_PROMPT. 3. Debes modificar o mejorar el INPUT_TEXT en el tono o estilo de REFINE_PROMPT. 4. Solo muestra el texto mejorado. No agregues ninguna otra explicación. No muestres la respuesta en \"\" (comillas dobles o simples) TEXTO DE ENTRADA:

2. Asegúrate de estar en el modo de edición de la página del blog de tu sitio web. Si no es así, haz clic en Editar () en la parte inferior derecha.

3. Selecciona cualquiera de los párrafos de texto y, luego, haz clic en la herramienta Mejorar el texto:

   

4. Para cambiar el tono del texto seleccionado y hacerlo más impactante y formal, escribe impactante formal en el cuadro de estilo. Este valor se agrega a la instrucción como la cadena REFINE_PROMPT antes de invocar el modelo.

5. Haz clic en Enviar.

   Después de unos segundos, el modelo genera una respuesta que se muestra en la página en un cuadro cerrado debajo del texto original.

6. Visualiza el texto del párrafo actualizado y haz clic en Reemplazar.

7. Para guardar los cambios en la página del blog, haz clic en Guardar en la parte superior de la página.

8. Para ver el valor final de la instrucción, en el menú de navegación () de la consola de Google Cloud, selecciona Logging > Explorador de registros.

   Nota: Si Logging no aparece en el menú de navegación, haz clic en Ver todos los productos. En la página Todos los productos, desplázate hasta la sección Observabilidad y, luego, haz clic en Logging.

9. Para destacar las entradas de registro pertinentes, en la barra de menú de resultados, haz clic en Acciones > Destacar en los resultados.

10. En Destacar en los resultados, escribe REFINE_PROMPT

    

Para verificar este objetivo, haz clic en Revisar mi progreso. Realizar cambios en el contenido del sitio web

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:

• Crear y probar una app de búsqueda genérica de Vertex AI
• Integrar la app de Vertex AI Search en un sitio web
• Usar la API de Imagen para generar y actualizar una imagen en el sitio web
• Traducir y mejorar texto en una página con el modelo de generación de texto de Vertex AI
• Implementar y probar la aplicación del sitio web en Cloud Run

Con estas capacidades, puedes crear el proceso para actualizar el contenido de tu sitio web y guardar los cambios en un almacenamiento externo, como Cloud Storage, para revisarlos y publicarlos.

Próximos pasos/Más información

• Vertex AI
• Gemini
• Agrega un widget de búsqueda a una página web
• Artifact Registry
• Cloud Run

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.