Utilizzo di Gemini Code Assist per esplorare e migliorare la soluzione di avvio rapido per riassunto dell'IA

1. Introduzione

In questo codelab, esamineremo una soluzione di avvio rapido esistente, AI Summarization, che utilizza i modelli Vertex AI per riepilogare i documenti PDF che sono stati caricati su Google Cloud Storage.

Useremo quindi Gemini Code Assist per:

• Comprendi il codice Python alla base della funzione Cloud Functions che si occupa di estrarre il testo dal documento PDF, riassumerlo e scrivere i risultati in BigQuery.
• Utilizzeremo Gemini Code Assist durante l'intero processo per aiutare a scrivere nuove funzionalità. Svilupperemo un'applicazione web (Python Flask Application) ed eseguiremo l'applicazione in locale per verificare il nostro codice.
• Facoltativamente, possiamo anche prendere in considerazione il deployment di questa applicazione in Cloud Run e migliorare il design (estetica) dell'applicazione web utilizzando Material Design.

Cosa farai...

• Eseguirai il deployment della soluzione di avvio rapido per riassunto dell'IA e attiverai il flusso di processo per comprenderne il funzionamento.
• Utilizzerai quindi l'IDE di Cloud Shell per scaricare il codice esistente per la soluzione di avvio rapido e usare Gemini Code Assist per comprendere il codice.
• Utilizzerai l'IDE Cloud Shell di Gemini Code Assist per generare il codice per una nuova funzionalità.

Cosa imparerai...

• Come funziona la soluzione di avvio rapido per riassunto dell'IA.
• Come utilizzare Gemini Code Assist per diverse attività degli sviluppatori, come la generazione e il completamento del codice e il riepilogo del codice.

Che cosa ti serve...

• Browser web Chrome
• Un account Gmail.
• Un progetto Cloud con fatturazione abilitata
• Gemini Code Assist abilitato per il tuo progetto Cloud

Questo lab è rivolto a sviluppatori di tutti i livelli, inclusi i principianti. Anche se l'applicazione di esempio è in linguaggio Python, non è necessario avere familiarità con la programmazione Python per capire cosa sta succedendo. Il nostro obiettivo sarà familiarizzare con le funzionalità di Gemini Code Assist per gli sviluppatori.

2. Configurazione

Questa sezione illustra tutto ciò che devi fare per iniziare a utilizzare questo lab.

Abilita Gemini per Cloud nel progetto Google Cloud

Ora abiliteremo Gemini per Cloud nel nostro progetto Google Cloud. Procedi come indicato di seguito:

1. Visita https://console.cloud.google.com e assicurati di aver selezionato il progetto Google Cloud con cui prevedi di lavorare per questo lab. Fai clic sull'icona Apri Gemini che vedi in alto a destra.

2. Sul lato destro della console si aprirà la finestra della chat di Gemini per Cloud. Fai clic sul pulsante Abilita come mostrato di seguito. Se non vedi il pulsante Abilita, ma vedi un'interfaccia di Chat, è probabile che tu abbia già abilitato Gemini per Cloud per il progetto e puoi andare direttamente al passaggio successivo.

3. Una volta abilitato, puoi testare Gemini per Cloud chiedendogli una o due query. Vengono mostrati alcuni esempi di query, ma puoi provare ad esempio What is Cloud Run?

Gemini per Cloud risponderà con la risposta alla tua domanda. Puoi fare clic sull'icona nell'angolo in alto a destra per chiudere la finestra della chat di Gemini per Cloud.

Abilita Gemini Code Assist nell'IDE di Cloud Shell

Per il resto del codelab, utilizzeremo l'IDE di Cloud Shell, un ambiente di sviluppo completamente gestito basato su Code OSS. Dobbiamo abilitare e configurare Code Assist nell'IDE di Cloud Shell, seguendo i passaggi riportati di seguito:

1. Visita la pagina ide.cloud.google.com. La visualizzazione dell'IDE potrebbe richiedere un po' di tempo, quindi ti chiediamo di avere pazienza.
2. Fai clic sul pulsante Cloud Code - Accedi nella barra di stato in basso come mostrato. Autorizza il plug-in come da istruzioni. Se nella barra di stato vedi il messaggio "Cloud Code - no project" (Cloud Code - nessun progetto), selezionalo e scegli il progetto Google Cloud specifico dall'elenco dei progetti con cui prevedi di lavorare.

3. Fai clic sul pulsante Gemini nell'angolo in basso a destra, come mostrato, e seleziona un'ultima volta il progetto Google Cloud corretto. Se ti viene chiesto di abilitare l'API Cloud AI Companion, fallo e vai avanti.
4. Dopo aver selezionato il progetto Google Cloud, assicurati di poterlo vedere nel messaggio di stato di Cloud Code nella barra di stato e di avere attivato Code Assist sulla destra, nella barra di stato, come mostrato di seguito:

Gemini Code Assist è pronto per l'uso.

Gemini Code Assist è disponibile anche negli IDE locali come Visual Studio Code o JetBrains IntelliJ. È disponibile anche in Google Cloud Workstations. Questo codelab è incentrato sull'IDE di Cloud Shell per consentire a tutti di utilizzare lo stesso ambiente, ma non esitare a provare la tua configurazione preferita e a dare un'occhiata a questo link per maggiori dettagli.

(Facoltativo) Se non vedi Gemini nella barra di stato in basso a destra, dovrai abilitare Gemini in Cloud Code. Prima di farlo, assicurati che Gemini sia abilitato nell'IDE: vai all'estensione Cloud Code → Impostazioni e inserisci il testo Gemini come mostrato di seguito. Assicurati che la casella di controllo sia selezionata. Devi ricaricare il tuo IDE.Questa operazione attiva Gemini in Cloud Code e nel tuo IDE verrà visualizzata l'icona di Gemini nella barra di stato.

3. Esegui il deployment della soluzione di avvio rapido per riassunto dell'IA

1. Vai alla soluzione di riassunto dei documenti con l'IA generativa
2. Fai clic su Esegui il deployment.

• Se la fatturazione non è abilitata per il progetto, abilita la fatturazione.
• Seleziona us-central1 come regione.
• Fai clic su Esegui il deployment.
• L'operazione potrebbe richiedere fino a 15 minuti.
• Non è necessario apportare modifiche, ma puoi esplorare il deployment della soluzione di avvio rapido facendo clic sul pulsante ESPLORA QUESTA SOLUZIONE nella pagina dei dettagli del deployment della soluzione.

4. Prova Gemini

Inizieremo imparando a chattare con Gemini. Gemini è disponibile come assistente per la chat all'interno dell'IDE di Cloud Shell come parte dell'estensione Cloud Code in VS Code. Per visualizzarla, fai clic sul pulsante Gemini nella barra di navigazione a sinistra. Cerca l'icona di Gemini nella barra degli strumenti di navigazione a sinistra e fai clic sull'icona.

Verrà visualizzato il riquadro Chat: GeminiI nell'IDE di Cloud Shell. Potrai chattare con Gemini per ricevere assistenza su Google Cloud.

Usiamo il riquadro della chat con Gemini per inserire un prompt e visualizzare la risposta di Gemini. Digita il seguente prompt:

What is Cloud Run? 

Gemini deve rispondere con i dettagli relativi a Cloud Run. I prompt sono domande o affermazioni che descrivono l'aiuto di cui hai bisogno. I prompt possono includere contesto di codice esistente che Google Cloud analizza per fornire risposte più utili o complete. Per saperne di più su come scrivere prompt per generare risposte efficaci, consulta Scrivere prompt migliori per Gemini in Google Cloud.

Prova i seguenti prompt di esempio o altri prompt di esempio per fare domande su 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?

Nota l'icona del cestino in alto: in questo modo puoi reimpostare il contesto della cronologia chat di Code Assist. Inoltre, tieni presente che questa interazione via chat è contestuale ai file su cui stai lavorando nell'IDE.

5. Scarica la funzione Cloud Functions per la soluzione di avvio rapido in Cloud Code

Supponendo che ti trovi nell'editor di Cloud Shell, segui questi passaggi:

• Fai clic su Cloud Code
• Nota: a seconda delle dimensioni dello schermo, potrebbero essere necessari uno o due passaggi.

o

• Fai clic su Cloud Functions.
• Se richiesto, accedi o autorizza il tuo account.
• Fai clic sulla funzione webhook.
• Fai clic sull'icona Scarica in una nuova area di lavoro .
• 
• Utilizza webhook-1 come nome dell'area di lavoro (deve essere il nome predefinito) o un altro nome, quindi fai clic su OK.
• Il codice verrà aperto nell'IDE di Cloud Shell.

6. Rivedi il progetto esistente

Questa soluzione di avvio rapido è illustrata di seguito:

Rivedi il flusso dalla funzionalità Carica PDF a Cloud Storage. La funzione Cloud Functions che viene richiamata se il file PDF viene caricato è indicata nel file main.py.

Fai clic sul file. Il punto di ingresso della funzione Cloud Functions è la funzione entrypoint, che alla fine richiama la funzione cloud_event_entrypoint che estrae il testo dal PDF e poi richiama summarization_entrypoint, che utilizza i modelli Vertex AI per riepilogare e scrivere i risultati rispettivamente in GCS e BigQuery.

Evidenzia tutto il codice nel file main.py o qualsiasi snippet di codice specifico. Fai clic su Gemini Chat e fornisci il seguente prompt: Explain this.

Dovrebbe essere visualizzata una spiegazione per il codice.

7. Esegui un'esecuzione di esempio

Secondo il diagramma dell'architettura, caricheremo un file nel bucket <PROJECT_ID>_uploads per richiamare la funzione Cloud Functions.

Assicurati di avere pronto un PDF di esempio da caricare e per il quale vuoi il riassunto.

• Nella console Cloud, vai a Google Cloud Storage.
• Vai al bucket <PROJECT_ID>_uploads. Fai clic sul link CARICA FILE e carica un PDF di esempio.

Se non hai un file PDF di esempio, puoi utilizzare uno degli esempi che abbiamo creato. Da Cloud Shell, esegui questo comando:

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

Una volta caricato il file, la funzione Cloud Functions webhook viene richiamata e riassumerà il testo trovato nel documento. L'output verrà scritto in un set di dati BigQuery denominato summary_dataset e nella tabella summary_table.

Esegui una query sulla tabella per visualizzare i risultati del riepilogo.

8. Crea un client di applicazione web per l'applicazione

La procedura descritta sopra è una procedura manuale passo passo per caricare il PDF di cui vuoi il riepilogo. Che ne dici di creare un front-end web per l'applicazione?

I requisiti per il front-end web sono semplici:

1. Un modulo HTML di base che ci consente di selezionare e caricare il file, che deve essere riepilogato.
2. Il file, una volta caricato correttamente, deve essere scritto nel bucket <PROJECT_ID>_uploads in modo che il resto della funzionalità funzioni così com'è.

Utilizzeremo Python e il framework Flask per le applicazioni web al fine di crearlo con l'assistenza di Duet AI.

Iniziamo. Supponiamo che tu abbia ancora la stessa area di lavoro aperta nell'IDE di Cloud Shell.

Chiudi tutti i file e fornisci il seguente prompt nella finestra di 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, questo codice dovrebbe produrre il seguente codice:

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)

Salva il codice riportato sopra come app.py nella directory principale dell'area di lavoro dell'IDE.

Vorremmo che l'applicazione venisse eseguita sulla porta 8080 e utilizzasse l'indirizzo host 0.0.0.0 , quindi chiediamo a Gemini di modificare l'istruzione app.run.

Fornisci il seguente prompt:

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

Ora il tuo codice dovrebbe avere il seguente aspetto:

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)

Successivamente, vorremmo che venisse generato anche il file index.html. Inserisci il seguente prompt nella finestra di Gemini Chat:

Provide the index.html file

Dovrebbe fornire il codice per index.html come indicato di seguito.

<!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>

Possiamo chiedere a Gemini di dirci dove salvare il file index.html. Fornisci il seguente prompt:

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

La risposta dovrebbe essere simile alla seguente:

Crea una cartella denominata templates nella cartella principale e salva al suo interno il file index.html.

Vorremmo utilizzare alcune eccezioni nel file app.py nel caso in cui non sia stato possibile salvare il file nel bucket Google Cloud Storage. Tieni aperto il file app.py e fornisci il seguente prompt nella finestra di 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.

A questo punto, dovrebbe essere aggiunta una funzione di gestione delle eccezioni, come illustrato di seguito:

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)

Poiché il messaggio di errore deve essere visualizzato nel file index.html, è necessario modificare anche questo. Chiedi a Gemini di farlo tramite il prompt seguente:

update the index.html to display the error message

Dovrebbe essere restituito un file index.html aggiornato, come mostrato di seguito:

<!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>

Assicurati di salvare le modifiche nel file app.py e index.html rispettivamente in ciascuno dei passaggi precedenti.

app.py non ha il nome del bucket corretto, perciò possiamo fornire questa informazione a Gemini e chiedergli di apportare le modifiche. Inoltre, dobbiamo fornire l'ID progetto per l'istanza storage.Client(). Di conseguenza, fornisci i seguenti due prompt (sostituisci <PROJECT_ID> con il tuo ID progetto Google Cloud) nella finestra di Gemini Chat e incorpora le modifiche:

Prompt 1

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

Prompt 2

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

Il file app.py finale ha questo aspetto (il mio ID progetto è mostrato di seguito, ma idealmente dovrebbe essere quello con cui stai lavorando e che hai indicato nel prompt qui sopra):

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. Esegui l'applicazione web in locale

Crea un ambiente Python con le dipendenze definite nel file requirements.txt. Vai alla tavolozza dei comandi nell'IDE di Cloud Shell come mostrato di seguito:

Digita Python: Create Environment, quindi segui i passaggi per creare un ambiente virtuale utilizzando (venv), quindi l'interprete Python 3.x e il file requirements.txt. Verrà creato l'ambiente richiesto.

Avvia subito il terminale, come mostrato di seguito:

Dai il seguente comando nel terminale:

python app.py

L'app Flask dovrebbe avviarsi. Dovresti vedere un risultato simile a questo:

(.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 l'URL http://127.0.0.1:8080 e dovrebbe essere visualizzata la pagina index.html.

Carica un file dalla tua macchina locale. Dovrebbe essere elaborato correttamente.

Puoi verificare il riepilogo accedendo al set di dati e alla tabella BigQuery che abbiamo visto in precedenza nel lab. In alternativa, puoi controllare il bucket Cloud Storage (&lt;PROJECT_ID&gt;_output).

10. (Facoltativo) Esplorazione aperta - Esegui il deployment in Cloud Run

• Puoi eseguire il deployment dell'applicazione in Cloud Run.
• Chiedi a Gemini Code Assist con il seguente prompt (potrebbe essere necessario provare alcune varianti del prompt riportato sopra):

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

11. (Facoltativo) Esplorazione aperta - Aggiungi stili CSS

• Usa Gemini Code Assist e l'assistente integrato nell'editor per aggiungere stili CSS all'applicazione ed eseguire di nuovo il deployment dell'applicazione al termine dell'operazione.
• Apri il file index.html e fornisci il seguente prompt in Gemini Chat: Can you apply material design styles to this index.html?
• Controlla il codice per vedere se funziona.

12. Complimenti!

Complimenti: hai lavorato correttamente con Gemini Code Assist a un progetto di esempio per capire come può aiutarti con generazione del codice, completamento e riepilogo del codice, nonché per aiutarti a ricevere risposte alle domande su Google Cloud.

13. Documenti di riferimento

• Home page dell'Assistente codice Gemini
• Utilizzare Gemini per l'assistenza e lo sviluppo dell'IA - Documentazione
• Casi d'uso di Gemini