Questa pagina è stata tradotta dall'API Cloud Translation.

Come usare Gemini per esplorare e migliorare un'applicazione esistente

1. Panoramica

Questo codelab dimostrerà come utilizzare Gemini per creare un'applicazione client su 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 di avvio rapido per l'elaborazione delle immagini IA/ML
Usa 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 correttamente il deployment di questa soluzione.

Consiglio: usa un account con autorizzazioni complete (ad esempio un account personale) anziché un account aziendale o della scuola

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

Vai alla console Google Cloud.
Fai clic sul menu a discesa del progetto attuale.
Fai clic su Nuovo progetto
Aggiungi un nome per il progetto e fai clic su CREA
- Consiglio: utilizza un nome di progetto univoco in modo che Project name e Project ID siano gli stessi

2. Esegui il deployment della soluzione di avvio rapido

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

Vai alla pagina dei dettagli della soluzione di avvio rapido per l'elaborazione delle immagini IA/ML
- Fai clic sul menu a tre linee
- Nella sezione Prodotti e soluzioni fai clic su Inizia subito
- Fai clic su Elaborazione di immagini IA/ML su Cloud Functions
Fai clic su ESEGUI IL DEPLOYMENT
- Se la fatturazione non è abilitata per il progetto, abilita la fatturazione.
- Conferma il nome del progetto e fai clic su CONTINUA.
- Seleziona us-central1 (Iowa) come regione.
- Se ti viene richiesto un altro input, accetta i valori predefiniti.
- 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.

Risoluzione dei problemi

Problema: visualizzi un errore che indica Partial deployment.?
- Soluzione: purtroppo questo significa che probabilmente dovresti eliminare il deployment e ricominciare da capo. Dovrebbe essere presente il pulsante ELIMINA DEPLOYMENT. Fai clic sul pulsante, quindi esegui nuovamente il deployment della soluzione di avvio rapido.

3. Abilita Gemini

Configura il tuo ambiente di modifica del codice e abilita 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.
- Fai clic su Prova il nuovo editor se utilizzi l'editor precedente.
  - Nota: se non vedi il pulsante Prova il nuovo editor, probabilmente stai già utilizzando il nuovo editor. L'editor precedente funzionerà, ma le visualizzazioni appariranno leggermente diverse.
- Fai clic sull'icona Apri in una nuova finestra
Se richiesto, accedi o autorizza il tuo account.
- A seconda delle impostazioni, ti potrebbe essere chiesto di autorizzare l'account più volte durante questo lab; quando ti viene chiesto, seleziona Autorizza ogni volta.
Fai clic sul pulsante Cloud Code - Accedi nella barra di stato in basso come mostrato. Autorizza il plug-in come da istruzioni.
Se richiesto, fai clic su Seleziona un progetto Google Cloud, quindi seleziona il progetto che stai utilizzando .
Abilita Gemini
- Fai clic su Cloud Code
  - Nota: a seconda delle dimensioni dello schermo, potrebbero essere necessari uno o due passaggi.
- Fai clic su Modifica impostazioni nella sezione GUIDA E FEEDBACK
- Tipo: Gemini: Enable
- Seleziona la casella di controllo (se non è già selezionata)
- Ricarica il tuo IDE.
- In questo modo viene attivato Gemini in Cloud Code e la barra di stato di Gemini viene visualizzata nel tuo IDE.
Fai clic sul pulsante Gemini nell'angolo in basso a destra come mostrato e seleziona il progetto Google Cloud corretto.
- Se viene visualizzato un messaggio di errore che indica che Gemini has not been enabled for your selected project. Fai clic su Abilita API Gemini
Conferma di riuscire a 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 utilizza Gemini per scoprire di più sulle soluzioni di avvio rapido e sul codice di cui hai eseguito il deployment.

Se hai abbandonato la pagina, fai clic su Cloud Code
Fai clic su Cloud Functions
- Se vedi il pulsante Seleziona un progetto, fai clic e seleziona il progetto su cui stai lavorando.
- Fai clic sulla funzione annotate-http.
- Fai clic sull'icona Scarica in una nuova area di lavoro
Utilizza annotate-http-1 come nome dell'area di lavoro (deve essere quello predefinito) e fai clic su OK.
Apri il file main.py
- Fai clic sull'icona Explorer .
- Fai clic sul file main.py per aprirlo
Fai clic sull'icona di Gemini Chat
- Nota: a seconda delle dimensioni dello schermo, potrebbero essere necessari uno o due passaggi.
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 su quelli futuri. Ad esempio, se fai un errore di battitura nell'ID o nella regione del progetto, questi verranno riportati nei prompt e nelle risposte futuri, il che può influire negativamente sulla tua esperienza. Se hai fatto un errore di battitura o se desideri cancellare la cronologia per qualsiasi altro motivo, puoi utilizzare l'icona del cestino per reimpostare la chat.

Reimposta il cestino di Duet Chat per evidenziare

5. Chiamata all'endpoint esistente della funzione Cloud Functions

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 per utilizzarlo 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 nel terminale il comando curl dal passaggio precedente 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) Esegui questa operazione con un'altra immagine presente sulla rete internet pubblica chiedendo a Duet 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 sui modelli linguistici di grandi dimensioni (LLM) non sono deterministici: nel senso che dato lo stesso input, potresti ottenere output diversi. Anche se segui perfettamente i passaggi, potresti non ricevere comandi funzionanti. Questi passaggi per la risoluzione dei problemi dovrebbero aiutarti a risolverli.

Il comando curl generato dovrebbe avere un aspetto simile al seguente:

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 alcune cose da controllare:

Problema: l'endpoint dell'URL include .a.run.app?
- Soluzione: Duet potrebbe pensare che stai eseguendo il deployment in Cloud Run. Sostituisci my-project-with-duet con il tuo ID progetto in https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate per ottenere l'endpoint Cloud Functions corretto e utilizzarlo per il comando curl.
Problema: l'endpoint dell'URL include my-project-with-duet?
- Soluzione: sostituisci my-project-with-duet con l'ID del tuo progetto.
Problema: nell'endpoint dell'URL manca 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 l'ID del tuo progetto.
Problema: a seconda del prompt utilizzato, a volte l'endpoint generato sarà cloudfunctions.net/annotate-http o cloudfunctions.net/annotate. Nell'endpoint dell'URL manca /annotate-http/annotate alla fine?
- Soluzione: assicurati che l'endpoint URL termini con il percorso dell'applicazione API completo cloudfunctions.net/annotate-http/annotate
Problema: la richiesta cURL funziona, ma non vengono restituite molte informazioni. La richiesta include delle funzionalità?
- Soluzione: non si tratta di un problema grave. Se continui senza modificare nulla, il resto del lab continuerà a funzionare. Se vuoi ricevere maggiori informazioni, puoi chiedere a Duet di aggiungere funzionalità alla richiesta cURL.
Problema: le risposte sembrano errate o sembrano non avere un contesto specifico per il codice. Utilizzi Gemini Chat nell'editor di Cloud Shell?
- Soluzione: prova ad aprire il file main.py ed evidenziare 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 dai a Gemini ancora più indicazioni su ciò che vorresti produrre. Assicurati di sostituire my-project-with-duet con l'ID del tuo 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 aver eseguito questa procedura di risoluzione dei problemi, il problema persiste.
- Soluzione: a causa della natura non deterministica degli LLM, è possibile che Duet abbia generato una risposta che non funzionerà. 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 del tuo progetto.

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

Usa Gemini per generare un file index.html che chiama l'endpoint della funzione Cloud Functions della soluzione di avvio rapido. Poi esegui il deployment del file index.html su Firebase Hosting per vedere il codice in azione.

Genera il codice lato client
- Torna nel riquadro della chat con 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 ad esempio:
  - 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 essere 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 ad esempio:
  - 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.
Abilita Firebase
- In una nuova scheda (lascia aperto l'editor di Cloud Shell corrente), visita https://console.firebase.google.com/
- Fai clic su Aggiungi progetto.
- Digita il tuo 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 Google Analytics, che però non verranno utilizzati 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 utilizzato Firebase in precedenza, ma in questo modo tutti possono seguire lo stesso percorso. Se ripeti l'operazione 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 Yes, this is my session ID (Sì, questo è il mio ID sessione).
  - Fai clic su Copia.
- Torna al terminale dell'editor di Cloud Shell
- Incolla nel terminale il valore copiato: 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 ad esempio:
    - What are the commands to initialize and deploy a new firebase application?
  - Dovresti vedere risultati come firebase init e firebase deploy con le istruzioni.
  - Poiché esistono molti modi possibili per farlo che Gemini potrebbe consigliare 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, premi la Freccia giù 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 per il tuo progetto.
        
        premi Enter
      - Per tutti i prompt rimanenti, premi Enter
    - firebase deploy
Esegui di nuovo il deployment dell'applicazione con una chiamata all'endpoint API Cloud Functions
- I comandi precedenti dovrebbero creare una directory public con un file index.html all'interno della directory frontend creata in precedenza. Nel file ~/annotate-http-1/frontend/public/index.html dovresti apportare le prossime modifiche.
- Apri il file index.html.
  - Fai clic sull'icona Explorer .
  - Fai clic sulla cartella frontend
  - Fai clic sulla cartella public
  - Fai clic sul file index.html
- Svuota il file index.html esistente.
- Incolla nel file index.html il codice che hai copiato in precedenza
- Esegui firebase deploy per eseguire il deployment della nuova applicazione
- Visita l'URL di Firebase Hosting per verificare se funziona.
  - Nota: per vedere gli aggiornamenti, potrebbe essere necessario aggiornare il sito web.

Risoluzione dei problemi

Il file index.html dovrebbe avere un aspetto simile al seguente:

<!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 (Non trovato) L'URL utilizzato nel metodo fetch include my-project-with-duet?
- Soluzione: sostituisci my-project-with-duet con l'ID del tuo progetto.
Problema: 404 (non trovato) Se nell'URL utilizzato nel metodo fetch manca l'URL completo?
- Soluzione: assicurati di includere l'URL completo nel metodo fetch. Dovrebbe avere il seguente aspetto: 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 dai a Gemini ancora più indicazioni su ciò che vorresti produrre. Assicurati di sostituire my-project-with-duet con l'ID del tuo 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 sito è stato implementato, ma non funziona?
- Soluzione: a causa della natura non deterministica degli LLM, è possibile che Duet abbia generato una risposta che non funzionerà. In questo caso, copia l'esempio index.html riportato sopra e prova a eseguire nuovamente il deployment con firebase deploy. Assicurati di sostituire my-project-with-duet con l'ID del tuo progetto.

7. (Facoltativo) Apri Esplorazione

Usa Gemini e l'assistente automatico per aggiungere stili CSS all'applicazione ed eseguire nuovamente il deployment dell'applicazione al termine dell'operazione. 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 che ti vengano addebitati costi per le risorse che hai creato oggi, puoi chiedere a Duet come farlo.

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 il tuo ID progetto.
Esegui il comando gcloud projects delete per rimuovere tutte le risorse che hai creato oggi.