Usa Gemini Code Assist para explorar y mejorar la solución de inicio para resúmenes con IA

1. Introducción

En este codelab, analizaremos una solución de inicio existente, AI Summarization, que usa modelos de Vertex AI para resumir documentos PDF que se subieron a Google Cloud Storage.

Luego, usaremos Gemini Code Assist para realizar las siguientes tareas:

• Comprende el código de Python que impulsa la Cloud Function que se encarga de extraer el texto del documento PDF, resumirlo y escribir los resultados en BigQuery.
• A lo largo del proceso, utilizaremos Gemini Code Assist para escribir nuevas funcionalidades. Desarrollaremos una aplicación web (aplicación de Flask en Python) y la ejecutaremos de forma local para verificar nuestro código.
• De manera opcional, también podemos analizar la implementación de esta aplicación en Cloud Run y mejorar el diseño (estética) de la aplicación web con Material Design.

Actividades

• Implementarás la solución de inicio rápido de Resúmenes con IA y activarás el flujo del proceso para comprender cómo funciona.
• Luego, usarás el IDE de Cloud Shell para descargar el código existente de la solución de inicio rápido y usar Gemini Code Assist para comprender el código.
• Usarás el IDE de Cloud Shell de Gemini Code Assist para generar código para una nueva funcionalidad.

Qué aprenderás

• Cómo funciona la Solución de inicio rápido de Resúmenes con IA
• Cómo usar Gemini Code Assist para completar distintas tareas de desarrollador, como la generación, la finalización y el resumen de código

Qué necesitarás

• Navegador web Chrome
• Una cuenta de Gmail
• Un proyecto de Cloud con la facturación habilitada
• Gemini Code Assist habilitado para tu proyecto de Cloud

Este lab está dirigido a desarrolladores de todos los niveles, incluidos principiantes. Aunque la aplicación de muestra está en lenguaje Python, no es necesario que sepas programar en ese lenguaje para entender lo que se hace. Nuestro enfoque será que te familiarices con las funciones de Gemini Code Assist para desarrolladores.

2. Configuración

En esta sección, se explica todo lo que debes hacer para comenzar este lab.

Habilita Gemini para Cloud en el proyecto de Google Cloud

Ahora habilitaremos Gemini para Cloud en nuestro proyecto de Google Cloud. Sigue los pasos que se indican a continuación:

1. Ve a https://console.cloud.google.com y asegúrate de haber seleccionado el proyecto de Google Cloud con el que planeas trabajar en este lab. Haz clic en el ícono de Abrir Gemini que ves en la esquina superior derecha.

2. La ventana de chat de Gemini for Cloud se abrirá en el lado derecho de la consola. Haz clic en el botón Habilitar como se muestra a continuación. Si no ves el botón Habilitar y, en cambio, ves una interfaz de chat, es probable que ya hayas habilitado Gemini para Cloud en el proyecto y puedas continuar directamente con el siguiente paso.

3. Una vez que esté habilitada, haz una o dos consultas para probar Gemini for Cloud. Se muestran algunas consultas de ejemplo, pero puedes probar con algo como What is Cloud Run?.

Gemini for Cloud responderá tu pregunta. Puedes hacer clic en el ícono de la esquina superior derecha para cerrar la ventana de chat de Gemini para Cloud.

Habilita Gemini Code Assist en el IDE de Cloud Shell

Usaremos el IDE de Cloud Shell, un entorno de desarrollo completamente administrado basado en Code OSS, durante el resto del codelab. Debemos habilitar y configurar Code Assist en el IDE de Cloud Shell. Los pasos se indican a continuación:

1. Visita ide.cloud.google.com. Es posible que el IDE tarde un poco en aparecer, así que ten paciencia.
2. Haz clic en el botón Cloud Code - Acceder en la barra de estado de la parte inferior como se muestra. Autoriza el complemento según las instrucciones. Si ves "Cloud Code (ningún proyecto)" en la barra de estado, selecciónalo y elige el proyecto específico de Google Cloud de la lista de proyectos con los que planeas trabajar.

3. Haz clic en el botón Gemini en la esquina inferior derecha como se muestra y selecciona por última vez el proyecto de Google Cloud correcto. Si se te solicita que habilites la API de Cloud AI Companion, hazlo y continúa.
4. Una vez que selecciones tu proyecto de Google Cloud, asegúrate de que puedas verlo en el mensaje de estado de Cloud Code en la barra de estado y de tener Code Assist habilitado en la barra de estado del lado derecho, como se muestra a continuación:

¡Gemini Code Assist está listo para usarse!

Gemini Code Assist también está disponible en IDE locales, como Visual Studio Code o JetBrains IntelliJ. También está disponible en Google Cloud Workstations. Este codelab se enfoca en el IDE de Cloud Shell como una forma de que todos usen el mismo entorno, pero no dudes en probar tu configuración favorita y consultar este vínculo para obtener más detalles.

Opcional: Si no ves Gemini en la barra de estado de la parte inferior derecha, deberás habilitar Gemini en Cloud Code. Antes de hacerlo, asegúrate de que Gemini esté habilitado en el IDE. Para ello, ve a Extensión de Cloud Code → Configuración y, luego, ingresa el texto Gemini como se muestra a continuación. Asegúrate de que la casilla de verificación esté seleccionada. Debes volver a cargar tu IDE.De esa forma, se habilitará Gemini en Cloud Code, y el ícono de Gemini en la barra de estado aparecerá en tu IDE.

3. Implementa la Solución de inicio rápido de Resumen con IA

1. Ir a la solución de resúmenes de documentos con IA generativa
2. Implementación con un clic

• Si tu proyecto no tiene habilitada la facturación, habilítala.
• Selecciona us-central1 como la región.
• Haz clic en Implementar.
• Esta acción puede llevar hasta 15 minutos.
• No es necesario que hagas ningún cambio, pero puedes explorar la implementación de las Soluciones de inicio rápido haciendo clic en el botón EXPLORE THIS SOLUTION en la página de detalles de la implementación de la solución.

4. Chatea con Gemini

Primero, aprenderás a chatear con Gemini. Gemini está disponible como asistente de chat en el IDE de Cloud Shell como parte de la extensión de Cloud Code en VS Code. Para abrirlo, haz clic en el botón de Gemini en la barra de navegación izquierda. Busca el ícono de Gemini en la barra de herramientas de navegación del lado izquierdo y haz clic en él.

De esa forma, se abrirá el panel Chat: Gemini en el IDE de Cloud Shell y podrás chatear con Gemini para obtener ayuda en Google Cloud.

Usemos el panel de chat de Gemini para ingresar una instrucción y ver la respuesta de Gemini. Escribe la siguiente instrucción:

What is Cloud Run? 

Gemini debería responder con los detalles sobre Cloud Run. Las instrucciones son preguntas o sentencias que describen la ayuda que necesitas. Los mensajes pueden incluir contexto de código existente que Google Cloud analiza para proporcionar respuestas más útiles o completas. Si quieres obtener más información para escribir instrucciones que generen respuestas correctas, consulta Escribe mejores instrucciones para Gemini en Google Cloud.

Prueba los siguientes ejemplos de instrucciones o alguna de las tuyas para hacer preguntas sobre Google Cloud:

• What is the difference between Cloud Run and Cloud Functions?
• What services are available on Google Cloud to run containerized workloads?
• What are the best practices to optimize costs while working with Google Cloud Storage?

Observa el ícono de papelera en la parte superior. Esta es la forma de restablecer el contexto del historial de chat de Code Assist. Ten en cuenta también que esta interacción de chat es contextual para los archivos en los que estás trabajando en el IDE.

5. Descarga la solución de inicio rápido de Cloud Function en Cloud Code

Si suponemos que estás en el Editor de Cloud Shell, sigue estos pasos:

• Haz clic en Cloud Code.
• Nota: Según el tamaño de tu pantalla, es posible que debas seguir uno o dos pasos.

o

• Haz clic en Cloud Functions.
• Si se te solicita, ingresa a tu cuenta o autorízala.
• Haz clic en la función de webhook.
• Haz clic en el ícono de Descargar en un nuevo lugar de trabajo.
• 
• Usa webhook-1 como nombre del espacio de trabajo (debe ser el predeterminado) o cualquier otro nombre y haz clic en Aceptar.
• Se abrirá el código en el IDE de Cloud Shell.

6. Revisa el proyecto existente

A continuación, se muestra esta solución de inicio rápido:

Revisa el flujo desde la funcionalidad de carga de PDF a Cloud Storage. La Cloud Function que se invocará si se sube el archivo PDF se proporciona en el archivo main.py.

Haz clic en ese archivo. El punto de entrada de la función de Cloud es la función entrypoint, que, finalmente, invoca la función cloud_event_entrypoint que extrae el texto del PDF y, luego, invoca la función summarization_entrypoint, que usa los modelos de Vertex AI para resumir y escribir los resultados en GCS y BigQuery, respectivamente.

Destaca todo el código del archivo main.py o cualquier fragmento de código específico. Haz clic en el chat de Gemini y escribe la siguiente instrucción: Explain this.

Esto debería proporcionarte una explicación del código.

7. Ejecuta una muestra

Según el diagrama de arquitectura, subiremos un archivo al bucket <PROJECT_ID>_uploads para que se invoque la Cloud Function.

Asegúrate de tener un PDF de muestra listo para subir y para el que quieras obtener un resumen.

• Ve a Google Cloud Storage en la consola de Cloud.
• Ve al bucket <PROJECT_ID>_uploads. Haz clic en el vínculo SUBIR ARCHIVOS y sube un PDF de muestra.

Si no tienes un archivo PDF de muestra, puedes usar uno de los que creamos. Desde Cloud Shell, ejecuta el siguiente comando:

gsutil cp \
    gs://arxiv-dataset/arxiv/cmp-lg/pdf/9410/9410009v1.pdf \
    gs://<PROJECT_ID>_uploads/

Una vez que el archivo se suba correctamente, se invocará la función de Cloud webhook y se resumirá el texto que se encuentre en el documento. El resultado se escribirá en un conjunto de datos de BigQuery llamado summary_dataset y en la tabla summary_table.

Consulta la tabla para ver los resultados del resumen.

8. Crea un cliente de aplicación web para la aplicación

El proceso anterior es un proceso manual paso a paso para subir el PDF que queremos resumir. ¿Qué tal si compilas un frontend web para la aplicación?

Los requisitos para el frontend web son simples:

1. Un formulario HTML básico que nos permite seleccionar y subir el archivo que se debe resumir.
2. El archivo, una vez subido correctamente, se debe escribir en el bucket <PROJECT_ID>_uploads para que el resto de la funcionalidad funcione como está.

Usaremos Python y el framework de Flask para aplicaciones web con el objetivo de crear esta aplicación con la ayuda de Duet AI.

Empecemos. Supondremos que aún tienes abierto el mismo espacio de trabajo en el IDE de Cloud Shell.

Cierra todos los archivos y escribe la siguiente instrucción en la ventana del chat de Gemini:

Write a Python Flask application that has a couple of routes:
The root route / should serve the index.html page using the render_template framework. The /upload route should accept a file being uploaded and write that file to a Cloud Storage bucket.

Idealmente, esto debería producir el siguiente código:

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    filename = file.filename
    bucket = storage.Client().bucket('your-bucket-name')
    blob = bucket.blob(filename)
    blob.upload_from_string(
        file.read(),
        content_type=file.content_type
    )
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True)

Guarda el código anterior como app.py en la raíz del espacio de trabajo del IDE.

Queremos que la aplicación se ejecute en el puerto 8080 y use la dirección de host 0.0.0.0 , por lo que le pediremos a Gemini que modifique la instrucción app.run.

Dale la siguiente instrucción:

Modify the app.py to run on port 8080 and host address 0.0.0.0

Ahora, tu código debería verse de la siguiente manera:

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    filename = file.filename
    bucket = storage.Client().bucket('your-bucket-name')
    blob = bucket.blob(filename)
    blob.upload_from_string(
        file.read(),
        content_type=file.content_type
    )
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

A continuación, nos gustaría que también se genere el archivo index.html. Escribe la siguiente instrucción en la ventana de chat de Gemini:

Provide the index.html file

Debería proporcionarte el código que se muestra a continuación para index.html.

<!DOCTYPE html>
<html>
<head>
  <title>File Upload</title>
</head>
<body>
  <h1>File Upload</h1>
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="Upload">
  </form>
</body>
</html>

Podemos pedirle a Gemini que nos diga dónde guardar el archivo index.html. Dale la siguiente instrucción:

Since this is using the render_template framework, where should this file be saved?

Debería dar una respuesta similar a la siguiente:

Crea una carpeta llamada templates en la carpeta raíz y guarda el archivo index.html en ella.

Nos gustaría que se incluyera un control de excepciones en el archivo app.py en caso de que no se pueda guardar el archivo en el bucket de Google Cloud Storage. Mantén abierto el archivo app.py y proporciona la siguiente instrucción en la ventana de chat de Gemini.

modify the app.py to have exception handling in the upload() function. The success or failure should be returned to the index page.

Ahora, esto debería agregar un control de excepciones como se muestra a continuación:

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    try:
        file = request.files['file']
        filename = file.filename
        bucket = storage.Client().bucket('your-bucket-name')
        blob = bucket.blob(filename)
        blob.upload_from_string(
            file.read(),
            content_type=file.content_type
        )
        return redirect(url_for('index'))
    except Exception as e:
        return render_template('index.html', error=str(e))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

Como necesitamos mostrar el mensaje de error en index.html, también debemos modificarlo. Pidámosle a Gemini que lo haga con la siguiente instrucción:

update the index.html to display the error message

Esto debería generar un archivo index.html actualizado, como se muestra a continuación:

<!DOCTYPE html>
<html>
<head>
  <title>File Upload</title>
</head>
<body>
  <h1>File Upload</h1>
  {% if error %}
    <p style="color: red;">{{ error }}</p>
  {% endif %}
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="Upload">
  </form>
</body>
</html>

Asegúrate de guardar los cambios en los archivos app.py y index.html en cada uno de los pasos anteriores.

El app.py no tiene el nombre de bucket correcto, por lo que podemos darle esa información a Gemini y pedirle que realice los cambios. Además, tenemos que proporcionar el ID del proyecto para la instancia de storage.Client(). Por lo tanto, proporciona los siguientes pares de instrucciones (reemplaza <PROJECT_ID> por el ID de tu proyecto de Google Cloud) en la ventana de Gemini Chat y aplica los cambios:

Instrucción 1

My bucket name is gemini-for-devs-demo_uploads, please change the code to use that.

Instrucción 2

My project id is gemini-for-devs-demo, please change the storage.Client() to use that.

El archivo app.py final se ve de la siguiente manera (a continuación, se muestra mi ID de proyecto, pero, idealmente, debería ser el que estás usando y el que proporcionaste en la instrucción anterior):

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    try:
        file = request.files['file']
        filename = file.filename
        bucket = storage.Client(project='gcp-experiments-349209').bucket('gcp-experiments-349209_uploads')
        blob = bucket.blob(filename)
        blob.upload_from_string(
            file.read(),
            content_type=file.content_type
        )
        return redirect(url_for('index'))
    except Exception as e:
        return render_template('index.html', error=str(e))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

9. Ejecuta la aplicación web de forma local

Crea un entorno de Python con las dependencias definidas en el archivo requirements.txt. Ve a la paleta de comandos en el IDE de Cloud Shell, como se muestra a continuación:

Escribe Python: Create Environment y, luego, sigue los pasos para crear un entorno virtual con (venv), luego el intérprete de Python 3.x y el archivo requirements.txt. Esto creará el entorno requerido.

Inicia la terminal ahora, como se muestra a continuación:

Ejecuta el siguiente comando en la terminal:

python app.py

Se debería iniciar la app de Flask y deberías ver algo similar a lo siguiente:

(.venv) romin@cloudshell:~/webhook-2 (gcp-experiments-349209)$ python app.py 
 * Serving Flask app 'app'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:8080
 * Running on http://10.88.0.3:8080
Press CTRL+C to quit
 * Restarting with watchdog (inotify)
 * Debugger is active!
 * Debugger PIN: 989-296-833

Visita la URL http://127.0.0.1:8080, y debería mostrarse la página index.html.

Sube un archivo desde tu máquina local y debería procesarse correctamente.

Para verificar el resumen, ve al conjunto de datos y a la tabla de BigQuery que vimos anteriormente en el lab. Como alternativa, puedes consultar el bucket de Cloud Storage (<PROJECT_ID>_output).

10. (Opcional) Exploración abierta: Implementa en Cloud Run

• Puedes implementar la aplicación en Cloud Run.
• Hazle la siguiente pregunta a Gemini Code Assist (es posible que debas probar algunas variaciones de la instrucción anterior):

I don't want to build a container image but deploy directly from source. What is the gcloud command for that?

11. Exploración abierta (opcional): Agrega diseños de CSS

• Usa Gemini Code Assist y el asistente en el editor para agregar estilos de CSS a tu aplicación y volver a implementarla cuando termines.
• Abre el archivo index.html y escribe la siguiente instrucción en el chat de Gemini: Can you apply material design styles to this index.html?
• Revisa el código y comprueba si funciona.

12. ¡Felicitaciones!

¡Felicitaciones! Usaste correctamente Gemini Code Assist en un proyecto de muestra para comprender cómo puede ayudarte con la generación, la finalización o el resumen de código, además de ayudarte a obtener respuestas a preguntas sobre Google Cloud.

13. Documentos de referencia

• Página principal de Gemini Code Assist
• Usa Gemini para obtener asistencia y desarrollo con IA: Documentación
• Casos de uso de Gemini