Come usare Gemini per esplorare e migliorare un'applicazione esistente

1. Panoramica

Questo codelab mostrerà come utilizzare Gemini per creare un'applicazione client sopra un backend API esistente.

Cosa imparerai a fare

Questo lab ha lo scopo di illustrare l'utilizzo di Gemini con un'applicazione esistente. In questo lab imparerai a:

Esegui il deployment della soluzione Jump Start per l'elaborazione delle immagini AI/ML
Utilizzare Gemini per esplorare l'applicazione API
Utilizzare Gemini per creare un client per l'applicazione API

Configurazione - Crea un nuovo progetto

A seconda dei criteri della tua organizzazione, potresti non essere in grado di eseguire il deployment corretto di questa soluzione.

Consiglio: utilizza un account con autorizzazioni complete (ad esempio un account personale) anziché un account aziendale o scolastico.

Nota:se hai creato di recente un progetto in cui disponi delle autorizzazioni complete e l'API Gemini è già abilitata, puoi continuare a utilizzare il progetto e saltare questo passaggio. Ad esempio, se di recente hai completato un altro codelab di Gemini, puoi saltare questo passaggio.

Vai alla console Google Cloud.
Fai clic sul menu a discesa del progetto corrente.
Fai clic su Nuovo progetto.
Aggiungi un nome al progetto e fai clic su CREA
- Consiglio: utilizza un nome di progetto univoco in modo che Project name e Project ID siano lo stesso

2. Esegui il deployment della soluzione già pronta

Le soluzioni già pronte sono modelli di soluzioni predefiniti di Google Cloud. Questo lab utilizza una soluzione già pronta per dimostrare come Gemini può contribuire a migliorare un'applicazione preesistente.

Vai alla pagina dei dettagli della soluzione rapida di elaborazione delle immagini AI/ML
- Fai clic sul menu a tre linee.
- Nel sottomenu Prodotti e soluzioni, fai clic su Soluzioni già pronte.
- Fai clic su Elaborazione di immagini AI/ML su Cloud Functions
Fai clic su ESEGUI IL DEPLOYMENT
- Se la fatturazione non è abilitata per il tuo progetto, attivala.
- Conferma il nome del progetto e fai clic su CONTINUA.
- Seleziona us-central1 (Iowa) come regione.
- Se ti viene chiesto di inserire altri dati, accetta i valori predefiniti.
- Fai clic su DEPLOY.
- L'operazione potrebbe richiedere fino a 15 minuti.
- Non è necessario apportare modifiche, ma puoi esplorare il deployment della soluzione già pronta.

Risoluzione dei problemi

Problema: visualizzi un errore che indica Partial deployment.?
- Soluzione: purtroppo, questo significa che probabilmente dovrai eliminare il deployment e ricominciare da capo. Dovrebbe essere presente un pulsante con la dicitura ELIMINA DEPLOYMENT. Fai clic su questo pulsante e poi esegui nuovamente il deployment della soluzione Jump Start.

3. Abilita Gemini

Configura l'ambiente di modifica del codice e attiva Gemini

Vai all'editor di Cloud Shell
- Torna alla console Google Cloud.
- Digita Cloud Shell Editor nella barra di ricerca e fai clic su Editor di Cloud Shell dal menu a discesa.
- Se utilizzi l'editor precedente, fai clic su Prova il nuovo editor.
  - Nota: se non vedi il pulsante Prova il nuovo Editor, probabilmente stai già utilizzando il nuovo Editor. L'editor legacy funzionerà, ma le visualizzazioni avranno un aspetto leggermente diverso.
- Fai clic sull'icona Apri in una nuova finestra .
Se richiesto, accedi o autorizza il tuo account.
- A seconda delle impostazioni, durante questo lab potrebbe esserti chiesto di autorizzare il tuo account più volte. Quando ti viene chiesto, seleziona l'autorizzazione ogni volta.
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 richiesto, fai clic su Seleziona un progetto Google Cloud, quindi seleziona il progetto che stai utilizzando
Attiva Gemini
- Fai clic su Cloud Code
  - Nota: a seconda delle dimensioni dello schermo, potrebbe essere necessario un passaggio o due.
- Fai clic su Modifica impostazioni nella sezione GUIDA E FEEDBACK.
- Tipo Gemini: Enable
- Seleziona la casella di controllo (se non è già selezionata)
- Ricarica l'IDE.
- In questo modo viene abilitato Gemini in Cloud Code e nella barra di stato dell'IDE viene visualizzato Gemini.
Fai clic sul pulsante Gemini nell'angolo in basso a destra, come mostrato, e seleziona il progetto Google Cloud corretto.
- Se visualizzi un errore che Gemini has not been enabled for your selected project. Fai clic su Abilita API Gemini
Verifica di poter visualizzare il progetto Google Cloud corretto a sinistra (vedrai il nome del progetto) e Gemini abilitato a destra, nella barra di stato, come mostrato di seguito:

4. Scarica il codice della funzione Cloud Functions

Scarica il codice e usa Gemini per scoprire di più sulle soluzioni già pronte e sul codice che hai implementato.

Se hai cambiato pagina, fai clic su Cloud Code .
Fai clic su Cloud Functions
- Se vedi il pulsante Seleziona un progetto, fai clic e seleziona il progetto con cui stai lavorando.
- Fai clic sulla funzione annotate-http.
- Fai clic sull'icona Scarica nel nuovo spazio di lavoro .
Utilizza annotate-http-1 come nome dello spazio di lavoro (deve essere il valore predefinito) e fai clic su Ok.
Apri il file main.py
- Fai clic sull'icona di Explorer .
- Fai clic sul file main.py per aprirlo
Fai clic sull'icona di Gemini Chat
- Nota: a seconda delle dimensioni dello schermo, potrebbe essere necessario un passaggio o due.
Prova a fare una domanda a Gemini. Inserisci un prompt come:
- What is a Jump Start Solution in Google Cloud?
- Explain this code.

Reimpostazione di Gemini Chat

I prompt influiscono sui prompt futuri. Ad esempio, se commetti un errore di battitura nell'ID progetto o nella regione, questi errori verranno riportati nei prompt e nelle risposte futuri, il che può influire negativamente sulla tua esperienza. Se hai commesso un errore di battitura o vuoi cancellare la cronologia per un altro motivo, puoi utilizzare l'icona del cestino per reimpostare la chat.

Reimpostare l'evidenziazione del cestino della chat di coppia

5. Chiamata dell'endpoint della funzione Cloud esistente

Esplora il codice e chiama l'endpoint di cui hai eseguito il deployment nella soluzione di avvio rapido.

Inserisci il prompt:
- IMPORTANTE: sostituisci my-project-with-duet nel seguente prompt con il tuo ID progetto.
- The region is us-central1 and the project id is my-project-with-duet. Write a curl post for the /annotate-http/annotate Cloud Function endpoint that performs label detection on the default eiffel tower image.
- Dovresti ricevere una risposta che include un comando curl come questo:
```
curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
...
```
- Copia questo comando curl da utilizzare nel passaggio successivo.
Prova il comando in un nuovo terminale
- Fai clic sul menu a tre linee.
- Fai clic su Terminale.
- Fai clic su Nuovo terminale.
- Incolla il comando curl del passaggio precedente nel terminale e premi Enter per eseguirlo.
- Dovresti ricevere una risposta che inizia così:
```
{
    "labelAnnotations": [
    {
    "mid": "/m/0csby",
    "description": "Cloud",
    "score": 0.97885925,
    "topicality": 0.97885925,
...
```
(Facoltativo) Fai la stessa cosa con un'altra immagine di internet pubblico chiedendo a Duet AI qualcosa del tipo:
- Do the same thing with the image https://storage.googleapis.com/cloud-samples-data/vision/eiffel_tower.jpg

Risoluzione dei problemi

Nota sul non determinismo: Gemini e altri prodotti basati su modelli linguistici di grandi dimensioni (LLM) non sono deterministici, il che significa che, dato lo stesso input, potresti ottenere output diversi. Anche se segui perfettamente i passaggi, potresti non ottenere comandi funzionanti. Questi passaggi per la risoluzione dei problemi dovrebbero aiutarti a risolvere il problema.

Il comando curl generato dovrebbe avere un aspetto simile a questo:

curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
    -H "Content-Type: application/json" \
    -d '{
  "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg",
  "features": "LABEL_DETECTION"
}' \
    "https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate"

Gemini utilizza TEST_IMAGE nel file main.py, che è un'immagine della Torre Eiffel.

Se il comando curl non funziona, ecco alcuni aspetti da controllare:

Problema: l'endpoint URL include .a.run.app?
- Soluzione: Duet potrebbe pensare che stai eseguendo il deployment in Cloud Run. Sostituisci my-project-with-duet con l'ID progetto in https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate per ottenere l'endpoint Cloud Functions corretto e utilizzalo per il comando curl.
Problema: l'endpoint URL include my-project-with-duet?
- Soluzione: sostituisci my-project-with-duet con l'ID progetto.
Problema: manca l'endpoint URL us-central1?
- Soluzione: assicurati che l'URL inizi con us-central1, ad esempio https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate, con il tuo ID progetto.
Problema: a seconda del prompt utilizzato, a volte l'endpoint generato avrà l'aspetto di cloudfunctions.net/annotate-http o cloudfunctions.net/annotate. L'endpoint URL non ha /annotate-http/annotate alla fine?
- Soluzione: assicurati che l'endpoint URL termini con il percorso completo dell'applicazione API cloudfunctions.net/annotate-http/annotate
Problema: la richiesta cURL funziona, ma non restituisce molte informazioni. La richiesta include funzionalità?
- Soluzione: non si tratta di un problema grave. Se continui senza modificare nulla, il resto del lab funzionerà comunque. Se vuoi ottenere più informazioni, puoi chiedere a Duet di aggiungere funzionalità alla richiesta cURL.
Problema: le risposte sembrano errate o prive di contesto specifico del codice. Stai utilizzando Gemini Chat all'interno di Cloud Shell Editor?
- Soluzione: prova ad aprire il file main.py ed evidenzia il codice correlato al prompt mentre usi Gemini Chat nell'editor di Cloud Shell. L'assistente Gemini in Google Cloud ha un contesto diverso, il che porterà a risposte diverse.

Problema: la risposta al prompt non è ancora del tutto corretta.

Soluzione: prova un prompt diverso in cui fornisci a Gemini indicazioni ancora più precise su ciò che vuoi che produca. Assicurati di sostituire my-project-with-duet con l'ID progetto. Ecco un esempio:

Give me the curl command for:

1- Cloud Function running in us-central1 and project my-project-with-duet
2- HTTP POST to the following endpoint: /annotate-http/annotate endpoint
3- JSON in the body: { "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg", "features": "LABEL_DETECTION" }

Problema: dopo tutti questi passaggi per la risoluzione dei problemi, il problema persiste.
- Soluzione: a causa della natura non deterministica degli LLM, è possibile che Duet abbia generato una risposta che non funziona. In questo caso, copia il comando curl di esempio riportato sopra e prova a eseguirlo nel terminale. Assicurati di sostituire my-project-with-duet con l'ID progetto.

6. Crea un client di applicazione web per l'API

Utilizza Gemini per generare un file index.html che chiama l'endpoint della Funzione Cloud della soluzione Jump Start. Poi, esegui il deployment del file index.html in Firebase Hosting per vedere il codice in azione.

Genera il codice lato client
- Nella casella della chat di Gemini, inserisci il prompt:
  - Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use the full url beginning with https. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
- Copia il file index.html generato nella risposta.
  - NOTA: questo codice ti servirà in un secondo momento, quindi salvalo da qualche parte se temi di perderlo.
- Chiudi main.py.
Crea una nuova directory frontend
- Puoi chiedere a Gemini qualcosa del tipo:
  - What are the console commands to create and navigate to a new frontend directory?
- Dovresti vedere risultati come mkdir frontend e cd frontend.
- Utilizza il terminale Cloud Shell per verificare di trovarti ancora nella directory annotate-http-1 ed esegui questi comandi:
  - cd ~/annotate-http-1
  - mkdir frontend
  - cd frontend
Verifica di aver eseguito l'accesso al progetto corretto nel terminale Cloud Shell
- Puoi chiedere a Gemini qualcosa del tipo:
  - What is the gcloud command to set my project?
- Dovresti vedere un risultato simile a gcloud config set project my-project-with-duet
  - Verifica che l'ID progetto sia corretto, quindi esegui il comando nel terminale Cloud Shell.
Attiva Firebase
- In una nuova scheda (lascia aperto l'editor di Cloud Shell), visita https://console.firebase.google.com/
- Fai clic su Aggiungi progetto.
- Digita l'ID progetto e attendi che venga visualizzato nel menu a discesa.
- Fai clic sull'ID progetto.
- Fai clic su Continua.
- Fai clic su Conferma piano.
- Fai clic su Continua.
- Deseleziona Abilita Google Analytics per questo progetto
  - Firebase consiglia di utilizzare Google Analytics, ma non verrà utilizzato in questa applicazione.
- Fai clic su Continua.
- Chiudi questa scheda e torna all'editor di Cloud Shell.
- Nota: questi passaggi sono necessari solo per gli utenti che non hanno mai utilizzato Firebase, ma consentono a tutti di seguire lo stesso percorso. Se lo fai di nuovo in futuro, puoi saltare questo passaggio.
Accedi a Firebase in Cloud Shell
- Nel terminale dell'editor di Cloud Shell, esegui il comando firebase login --no-localhost
- Visita l'URL fornito
  - Fai clic su Sì, ho appena eseguito questo comando.
  - Fai clic su Sì, questo è il mio ID sessione.
  - Fai clic su Copia.
- Tornare al terminale dell'editor di Cloud Shell
- Incolla il valore copiato nel terminale dove è scritto: Enter authorization code:
- premi Enter
Esegui il deployment di un nuovo sito web su Firebase Hosting
- Inizializza un nuovo progetto Firebase
  - Puoi chiedere a Gemini qualcosa del tipo:
    - What are the commands to initialize and deploy a new firebase application?
  - Dovresti visualizzare risultati come firebase init e firebase deploy con le istruzioni.
  - Poiché esistono molti modi possibili per farlo che Gemini potrebbe consigliarti in base alle tue preferenze, ecco un consiglio specifico da seguire:
    - firebase init
      - Freccia giù fino a Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
        
        Premi la barra Space.
        
        premi Enter
      - Freccia giù fino a Use an existing project
        
        premi Enter
      - Se vedi un elenco di progetti, scorri verso il basso fino al progetto che stai utilizzando oggi
        
        premi Enter
      - Se ti viene chiesto di Please input the ID of the Google Cloud Project you would like to add Firebase:
        
        Digita l'ID progetto.
        
        premi Enter
      - Per tutti i prompt rimanenti, premi Enter.
    - firebase deploy
Esegui nuovamente il deployment dell'applicazione con una chiamata all'endpoint dell'API Cloud Functions
- I comandi precedenti dovrebbero creare una directory public con un file index.html all'interno della directory frontend che hai creato in precedenza. Il file ~/annotate-http-1/frontend/public/index.html è quello in cui devi apportare le prossime modifiche.
- Apri il file index.html.
  - Fai clic sull'icona di Explorer .
  - Fai clic sulla cartella frontend.
  - Fai clic sulla cartella public.
  - Fai clic sul file index.html
- Svuota il file index.html esistente.
- Incolla il codice che hai copiato in precedenza nel file index.html.
- Esegui firebase deploy per eseguire il deployment della nuova applicazione
- Visita l'URL di Firebase Hosting per verificare se funziona.
  - Nota: probabilmente dovrai eseguire un aggiornamento forzato del sito web per visualizzare gli aggiornamenti.

Risoluzione dei problemi

Il file index.html dovrebbe avere un aspetto simile a questo:

<!DOCTYPE html>
<html>
<head>
<title>Vision API Annotate Image</title>
</head>
<body>
<h1>Vision API Annotate Image</h1>
<form id="annotate-form" action="https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate" method="POST">
    <label for="image-uri">Image URI:</label>
    <input type="text" id="image-uri" name="image_uri" value="gs://cloud-samples-data/vision/eiffel_tower.jpg">
    <br>
    <label for="features">Features:</label>
    <select id="features" name="features">
    <option value="LABEL_DETECTION">LABEL_DETECTION</option>
    <option value="TEXT_DETECTION">TEXT_DETECTION</option>
    <option value="IMAGE_PROPERTIES">IMAGE_PROPERTIES</option>
    </select>
    <br>
    <input type="submit" value="Annotate">
</form>

<div id="result"></div>

<script>
    const form = document.getElementById('annotate-form');

    form.addEventListener('submit', (event) => {
    event.preventDefault();

    const imageUri = document.getElementById('image-uri').value;
    const features = document.getElementById('features').value;

    const data = {
        image_uri: imageUri,
        features: features,
    };

    fetch('https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    })
        .then((response) => response.json())
        .then((result) => {
        const resultElement = document.getElementById('result');
        resultElement.innerHTML = JSON.stringify(result, null, 2);
        });
    });
</script>
</body>
</html>

Se il sito web non funziona, ecco alcune cose da controllare:

Problema: 404 (Destinazione non trovata). L'URL utilizzato nel metodo fetch include my-project-with-duet?
- Soluzione: sostituisci my-project-with-duet con l'ID progetto.
Problema: 404 (non trovato). L'URL utilizzato nel metodo fetch non include l'URL completo?
- Soluzione: assicurati di includere l'URL completo nel metodo fetch. Dovrebbe avere un aspetto simile a questo: https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate
Problema: la risposta al prompt non è ancora del tutto corretta.
- Soluzione: prova un prompt diverso in cui fornisci a Gemini indicazioni ancora più precise su ciò che vuoi che produca. Assicurati di sostituire my-project-with-duet con l'ID progetto. Ecco un esempio:
  - Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
Problema: il tuo sito è stato implementato, ma non funziona?
- Soluzione: a causa della natura non deterministica degli LLM, è possibile che Duet abbia generato una risposta che non funziona. In questo caso, copia l'esempio index.html riportato sopra e prova a eseguirne nuovamente il deployment con firebase deploy. Assicurati di sostituire my-project-with-duet con l'ID progetto.

7. (Facoltativo) Esplorazione aperta

Utilizza Gemini e l'assistente nell'editor per aggiungere stili CSS alla tua applicazione ed eseguirne nuovamente il deployment al termine. Se sei in cerca di ispirazione, ecco un esempio di prompt che potresti provare:
- Make this index.html file use material design.
Altre cose da provare:
- Il sito web generato dovrebbe funzionare con qualsiasi immagine http pubblica. Collabora con Duet per visualizzare l'immagine sulla pagina.

8. (Facoltativo) Elimina il progetto

Se vuoi evitare addebiti per le risorse che hai creato oggi, puoi chiedere a Duet come fare.

Inserisci il prompt:
- How can I delete my project?
- Dovresti vedere un risultato simile a gcloud projects delete my-project-with-duet.
- IMPORTANTE Sostituisci my-project-with-duet nel comando precedente con l'ID progetto.
Esegui il comando gcloud projects delete per rimuovere tutte le risorse che hai creato oggi.