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 già pronta esistente, AI Summarization, che utilizza i modelli Vertex AI per riassumere i documenti PDF caricati in Google Cloud Storage.

Utilizzeremo quindi Gemini Code Assist per:

• Comprendi il codice Python che alimenta la funzione Cloud Functions che si occupa di estrarre il testo dal documento PDF, riassumerlo e scrivere i risultati in BigQuery.
• Durante l'intero processo, ci avvarremo dell'aiuto di Gemini Code Assist per scrivere nuove funzionalità. Svilupperemo un'applicazione web (applicazione Python Flask) ed eseguiremo l'applicazione localmente per verificare il nostro codice.
• Se vuoi, possiamo anche esaminare il deployment di questa applicazione su Cloud Run e migliorare il design (l'estetica) dell'applicazione web utilizzando Material Design.

Attività previste

• Eseguirai il deployment della soluzione già pronta per il riepilogo con l'AI e attiverai il flusso di processo per capire come funziona.
• Utilizzerai quindi l'IDE Cloud Shell per scaricare il codice esistente per la soluzione Jump Start e Gemini Code Assist per comprenderlo.
• Utilizzerai l'IDE di Gemini Code Assist Cloud Shell per generare codice per una nuova funzionalità.

Cosa imparerai…

• Come funziona la soluzione già pronta per il riepilogo con l'AI.
• Come utilizzare Gemini Code Assist per diverse attività di sviluppo, come la generazione, il completamento e il riepilogo del codice.

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. Sebbene l'applicazione di esempio sia in linguaggio Python, non è necessario avere familiarità con la programmazione in Python per capire cosa sta succedendo. Ci concentreremo sull'acquisizione di familiarità con le funzionalità di Gemini Code Assist per sviluppatori.

2. Configurazione

Questa sezione descrive tutto ciò che devi fare per iniziare questo lab.

Abilita Gemini in Cloud nel progetto Google Cloud

Ora abiliteremo Gemini in Cloud nel nostro progetto Google Cloud. Segui i passaggi riportati di seguito:

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

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

3. Una volta attivato, puoi provare Gemini in Cloud ponendo una o due query. Vengono mostrate alcune query di esempio, ma puoi provare a eseguire una query come What is Cloud Run?.

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

Abilitare Gemini Code Assist nell'IDE di Cloud Shell

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

1. Visita ide.cloud.google.com. Potrebbe essere necessario un po' di tempo prima che l'IDE venga visualizzato, quindi abbi pazienza.
2. Fai clic sul pulsante Cloud Code - Sign in (Cloud Code - Accedi) nella barra di stato in basso, come mostrato. Autorizza il plug-in come indicato. Se nella barra di stato vedi "Cloud Code - no project", selezionalo e poi 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 visualizzarlo nel messaggio di stato di Cloud Code nella barra di stato e che Code Assist sia attivato a 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 si concentra sull'IDE Cloud Shell come modo per far utilizzare a tutti lo stesso ambiente, ma non esitare a provare la tua configurazione preferita e consulta questo link per ulteriori dettagli.

(Facoltativo) Se non vedi Gemini nella barra di stato in basso a destra, devi abilitarlo in Cloud Code. Prima di farlo, assicurati che Gemini sia attivato nell'IDE andando su Estensione Cloud Code → Impostazioni e poi inserisci il testo Gemini come mostrato di seguito. Assicurati che la casella di controllo sia selezionata. Devi ricaricare l'IDE.In questo modo, Gemini viene abilitato in Cloud Code e l'icona di Gemini nella barra di stato viene visualizzata nell'IDE.

3. Esegui il deployment della soluzione già pronta di riassunto basato sull'AI

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

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

4. Prova Gemini

Inizieremo imparando a usare Gemini. Gemini è disponibile come assistente di chat nell'IDE Cloud Shell nell'ambito dell'estensione Cloud Code in VS Code. Puoi visualizzarlo facendo 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.

Verrà visualizzato il riquadro Chat: GeminiI all'interno dell'IDE di Cloud Shell e potrai chattare con Gemini per ricevere assistenza su Google Cloud.

Utilizziamo 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 dovrebbe rispondere con i dettagli su Cloud Run. I prompt sono domande o affermazioni che descrivono l'aiuto di cui hai bisogno. I prompt possono includere il contesto del codice esistente che Google Cloud analizza per fornire risposte più utili o complete. Per saperne di più su come scrivere prompt per generare risposte valide, consulta l'articolo Scrivere prompt migliori per Gemini in Google Cloud.

Prova i seguenti prompt di esempio o altri di tua scelta per porre 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: questo è il modo per reimpostare il contesto della cronologia della chat di Code Assist. Tieni presente inoltre che questa interazione via chat è contestuale ai file su cui stai lavorando nell'IDE.

5. Scaricare la funzione Cloud Jump Start Solution in Cloud Code

Supponendo che tu sia nell'editor di Cloud Shell, segui questi passaggi:

• Fai clic su Cloud Code
• Nota: a seconda delle dimensioni dello schermo, l'operazione potrebbe richiedere 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 nel nuovo spazio di lavoro .
• 
• Utilizza webhook-1 come nome dello spazio di lavoro (dovrebbe essere il valore predefinito) o qualsiasi altro nome e fai clic su OK.
• In questo modo il codice verrà aperto nell'IDE Cloud Shell.

6. Rivedi il progetto esistente

Questa soluzione già pronta è mostrata di seguito:

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

Fai clic sul file. Il punto di ingresso per la funzione cloud è la funzione entrypoint, che alla fine richiama la funzione cloud_event_entrypoint che estrae il testo dal PDF, quindi richiama la funzione summarization_entrypoint, che utilizza i modelli Vertex AI per riassumere 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 inserisci il seguente prompt: Explain this.

Dovresti visualizzare una spiegazione del codice.

7. Esegui un test di esempio

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

Assicurati di avere a disposizione un PDF di esempio che puoi caricare e per il quale vuoi il riepilogo.

• Vai a Google Cloud Storage nella console Google Cloud.
• 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 utilizzarne uno di quelli 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 correttamente il file, verrà richiamata la funzione cloud webhook, che 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 dell'applicazione web per l'applicazione

La procedura descritta sopra è una procedura manuale passo passo per caricare il PDF che vuoi riassumere. 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 da riassumere.
2. Una volta caricato correttamente, il file deve essere scritto nel bucket <PROJECT_ID>_uploads, in modo che il resto della funzionalità funzioni come previsto.

Utilizzeremo Python e il framework Flask per le applicazioni web per creare questo progetto con l'aiuto di Duet AI.

Iniziamo. Supponiamo che tu abbia ancora aperto lo stesso workspace nell'IDE Cloud Shell.

Chiudi tutti i file e inserisci 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, dovrebbe essere generato 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 precedente come app.py nella radice dello spazio di lavoro dell'IDE.

Vogliamo che l'applicazione venga eseguita sulla porta 8080 e utilizzi l'indirizzo host 0.0.0.0 , quindi chiediamo a Gemini di modificare l'istruzione app.run.

Inserisci il seguente prompt:

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

Il codice dovrebbe avere ora 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 venga generato anche il file index.html. Inserisci il seguente prompt nella finestra di Gemini Chat:

Provide the index.html file

Dovrebbe fornirti il codice riportato di seguito per 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>

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

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

Dovresti ricevere una risposta simile alla seguente:

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

Vorremmo una gestione delle eccezioni nel file app.py nel caso in cui il file non possa essere salvato nel bucket Google Cloud Storage. Lascia aperto il file app.py e inserisci 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.

Ora dovrebbe essere aggiunta la gestione delle eccezioni, come mostrato 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é dobbiamo visualizzare il messaggio di errore nel file index.html, dobbiamo modificare anche questo. Chiediamo a Gemini di farlo tramite il prompt riportato di seguito:

update the index.html to display the error message

In questo modo, dovresti ottenere 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 in ogni passaggio precedente rispettivamente nei file app.py e index.html.

app.py non ha il nome del bucket corretto, pertanto possiamo fornire queste informazioni a Gemini e chiedergli di apportare le modifiche. Inoltre, dobbiamo fornire l'ID progetto per l'istanza storage.Client(). Pertanto, fornisci la seguente coppia di 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 fornito nel prompt precedente):

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 al riquadro dei comandi nell'IDE Cloud Shell come mostrato di seguito:

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

Avvia il terminale ora, come mostrato di seguito:

Esegui questo comando nel terminale:

python app.py

L'app Flask dovrebbe avviarsi e dovresti vedere qualcosa di 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 e dovrebbe essere elaborato correttamente.

Puoi controllare il riepilogo andando al set di dati e alla tabella BigQuery che abbiamo visto in precedenza nel lab. In alternativa, puoi controllare il bucket Cloud Storage (<PROJECT_ID>_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 precedente):

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

11. (Facoltativo) Apri Esplorazione - Aggiungi stili CSS

• Utilizza Gemini Code Assist e l'assistente nell'editor per aggiungere stili CSS alla tua applicazione ed eseguirne nuovamente il deployment al termine.
• Apri il file index.html e inserisci il seguente prompt nella chat con Gemini: Can you apply material design styles to this index.html?
• Controlla il codice e verifica se funziona.

12. Complimenti!

Congratulazioni. Hai utilizzato correttamente Gemini Code Assist in un progetto di esempio per capire come può aiutarti con la generazione, il completamento e il riepilogo del codice, nonché a trovare risposte alle domande su Google Cloud.

13. Documenti di riferimento

• Home page di Gemini Code Assist
• Utilizzare Gemini per l'assistenza e lo sviluppo basati sull'AI - Documentazione
• Casi d'uso di Gemini