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 rápido, el resumen de IA, que usa modelos de Vertex AI para resumir documentos PDF que se subieron a Google Cloud Storage.

Luego, usaremos Gemini Code Assist para lo siguiente:

• Comprende el código de Python que impulsa la Cloud Function que realiza el trabajo de extraer el texto del documento PDF, resumirlo y escribir los resultados en BigQuery.
• Usaremos Gemini Code Assist en todo el proceso para escribir funcionalidades nuevas. Desarrollaremos una aplicación web (aplicación de Flask en Python) y la ejecutaremos de forma local para verificar el código.
• De manera opcional, también podemos ver 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 para crear 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 y usar Gemini Code Assist para comprenderlo.
• Usarás el IDE de Cloud Shell de Gemini Code Assist para generar código para una funcionalidad nueva.

Qué aprenderás

• Cómo funciona la solución de inicio para resúmenes con IA.
• Cómo usar Gemini Code Assist para varias tareas de desarrolladores, como la generación de código, la finalización de código 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. Nos enfocaremos en familiarizarte con las capacidades de Gemini Code Assist para desarrolladores.

2. Configuración

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

Habilitar 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 Abrir Gemini que ves en la parte superior derecha.

2. La ventana del chat de Gemini para 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 su lugar, ves una interfaz de Chat, es probable que ya hayas habilitado Gemini para Cloud para el proyecto y que puedas ir directamente al siguiente paso.

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

Gemini para Cloud te dará la respuesta a tu pregunta. Puedes hacer clic en el ícono en la esquina superior derecha para cerrar la ventana de chat de Gemini para Cloud.

Habilita Gemini Code Assist en el IDE de Cloud Shell

Para el resto del codelab, usaremos el IDE de Cloud Shell, un entorno de desarrollo completamente administrado y basado en Code OSS. Debemos habilitar y configurar Code Assist en el IDE de Cloud Shell. Sigue estos pasos:

1. Visita ide.cloud.google.com. Es posible que el IDE demore un tiempo 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 una ú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 poder verlo en el mensaje de estado de Cloud Code en la barra de estado y de tener habilitada Code Assist en la barra de estado, como se muestra a continuación:

Gemini Code Assist está listo para que lo uses

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 para que todos usen el mismo entorno, pero siéntete libre de 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.Esto 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 para crear resúmenes con IA

1. Ir a la solución de resumen de documentos de la IA generativa
2. Haz clic en Implementar.

• 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 realices ningún cambio, pero puedes explorar la implementación de la solución de inicio haciendo clic en el botón EXPLORAR ESTA SOLUCIÓN en la página de detalles de la implementación de la solución.

4. Chatea con Gemini

Para comenzar, aprenderemos 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 que aparezca, 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 de la izquierda y haz clic en él.

Se abrirá el panel Chat: GeminiI dentro del IDE de Cloud Shell, y podrás chatear con Gemini para obtener ayuda sobre Google Cloud.

Permite que usemos el panel del 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 y generar buenas respuestas, consulta Cómo escribir 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 la papelera en la parte superior, que es la forma de restablecer el contexto del historial de chat de Code Assist. Ten en cuenta también que esta interacción por chat es contextual a 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 estás en el Editor de Cloud Shell, sigue estos pasos:

• Haz clic en Cloud Code .
• Nota: Según el tamaño de la 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 webhook.
• Haz clic en el ícono Descargar en un lugar de trabajo nuevo .
• 
• Usa webhook-1 como nombre del lugar de trabajo (debe ser el predeterminado) o cualquier otro nombre, y haz clic en Aceptar.
• Esto abrirá el código en el IDE de Cloud Shell.

6. Revisa el proyecto existente

Esta solución de inicio se muestra a continuación:

Revisa el flujo de la función Subir PDF a Cloud Storage. La Cloud Function que se invocará si se sube el archivo PDF aparece en el archivo main.py.

Haz clic en ese archivo. El punto de entrada para la Cloud Function es la función entrypoint, que finalmente invoca la función cloud_event_entrypoint que extrae el texto del PDF y, luego, invoca el 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 Gemini Chat y escribe la siguiente instrucción: Explain this.

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

7. Realiza una ejecución de 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 listo un PDF de muestra que puedas subir y para el cual desees el 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 ejemplos que creamos. En 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 se suba correctamente el archivo, se invocará la Cloud Function webhook y se resumirá el texto encontrado 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é te parece compilar 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 cuando se sube correctamente, debe escribirse en el bucket <PROJECT_ID>_uploads para que el resto de la funcionalidad se ejecute tal como está.

Usaremos Python y el framework de Flask para aplicaciones web a fin de compilarlo en asistencia con Duet AI.

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

Cierra todos los archivos y proporciona la siguiente instrucción en la ventana de Gemini Chat:

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 código como se indica 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():
    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 el espacio de trabajo raíz del IDE.

Queremos que la aplicación se ejecute en el puerto 8080 y use la dirección de host 0.0.0.0 , así que solicitemos a Gemini que modifique la sentencia app.run.

Muestra la siguiente instrucción:

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

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, queremos que también se genere el archivo index.html. Escribe la siguiente instrucción en la ventana de Gemini Chat:

Provide the index.html file

Debería proporcionarte el código que se proporciona 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 indique dónde guardar el archivo index.html. Muestra la siguiente instrucción:

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

Debería proporcionar una respuesta similar a la siguiente:

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

Queremos que el archivo app.py tenga un control de excepciones en caso de que no se pueda guardar en el bucket de Google Cloud Storage. Mantén abierto el archivo app.py y muestra la siguiente instrucción en la ventana de Gemini Chat.

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

Esto debería agregar un poco de 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. Pídele a Gemini que lo haga usando la siguiente instrucción:

update the index.html to display the error message

Esto debería mostrar 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>

En cada uno de los pasos anteriores, asegúrate de guardar los cambios en los archivos app.py y index.html, respectivamente.

El app.py no tiene el nombre de bucket correcto, por lo que podemos proporcionarle esa información a Gemini y pedirle que realice los cambios. Además, debemos proporcionar el ID del proyecto para la instancia storage.Client(). Por lo tanto, proporciona las siguientes instrucciones (reemplaza <PROJECT_ID> por el ID de tu proyecto de Google Cloud) en la ventana de Gemini Chat e incorpora 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 (el ID de mi proyecto se muestra a continuación, pero idealmente debería ser el que estás trabajando 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 manera local

Crea un entorno 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 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

La app de Flask debería iniciarse, y deberías ver algo como esto:

(.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 mostrar la página index.html

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

Para comprobar el resumen, ve al conjunto de datos y la tabla de BigQuery que vimos antes en el lab. Como alternativa, puedes procesar el bucket de Cloud Storage (&lt;PROJECT_ID&gt;_output).

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

• Puedes implementar la aplicación en Cloud Run.
• Pregúntale a Gemini Code Assist con la siguiente instrucción (es posible que debas probar con 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. (Opcional) Exploración abierta: Agrega estilos de CSS

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

12. ¡Felicitaciones!

¡Felicitaciones! Trabajaste correctamente con Gemini Code Assist en un proyecto de muestra para comprender cómo puede ayudarte a generar código, completarlo y resumir código, y ayudarte a obtener respuestas a preguntas sobre Google Cloud.

13. Documentos de referencia

• Página principal de Gemini Code Assit
• Documentación sobre el uso de Gemini para la asistencia y el desarrollo de la IA
• Casos de uso de Gemini