Creare haiku sui prodotti Google con l'API PaLM e Flutter

1. Prima di iniziare

Una delle scoperte più entusiasmanti del machine learning (ML) è l'AI generativa, che può produrre immagini, testi, audio e persino video straordinari basati su semplici testi o prompt degli utenti. In particolare, con il rilascio dell'API PaLM, Google consente agli sviluppatori di creare categorie di app con esperienze utente piacevoli e ripensate con la tecnologia PaLM.

In questo codelab, creerai un'app che utilizza l'API PaLM per generare haiku basati sui nomi dei prodotti Google. Utilizzi Flutter anche per creare un'app multipiattaforma che mostri gli haiku.

Prerequisiti

• Conoscenza di base dei modelli linguistici di grandi dimensioni (LLM), ad esempio i prompt
• Conoscenza di base dello sviluppo Flutter con Dart

Obiettivi didattici

• Come utilizzare l'API PaLM di Google.
• Come creare un'app Flutter multipiattaforma per visualizzare i risultati.

Che cosa ti serve

• L'SDK Flutter
• Un editor di testo, come Visual Studio Code (VS Code)
• Configurazione di VS Code per Flutter e Dart
• Configurazione di Android o iOS per Flutter (inclusi emulatori e simulatori)
• Configurazione desktop per Flutter per Windows, Linux o macOS
• Configurazione web per Flutter
• Una chiave API per l'API PaLM

2. Configurazione

Scarica il codice di avvio

1. Vai a questo repository GitHub.
2. Fai clic su Code > Download zip per scaricare tutto il codice di questo codelab.
3. Decomprimi il file ZIP scaricato per estrarre una cartella principale codelabs-main. Ti serve solo la sottodirectory haiku-generator, che contiene le seguenti cartelle:

• Le cartelle da step0 a step3, che contengono il codice iniziale su cui si basa ogni passaggio di questo codelab.
• La cartella finished, che contiene il codice completato per l'app di esempio finita.

Scarica le dipendenze del progetto

1. In VS Code, fai clic su File > Open folder (Apri cartella) > codelabs-main > haiku_generator > step0 > lib > main.dart.
2. Se viene visualizzata una finestra di dialogo di VS Code che ti chiede di scaricare i pacchetti richiesti per l'app iniziale, fai clic su Scarica pacchetti.

3. Se non vedi una finestra di dialogo di VS Code che ti chiede di scaricare i pacchetti richiesti per l'app iniziale, apri il terminale, vai alla cartella step0 ed esegui il comando flutter pub get.

Esegui l'app di base

1. In VS Code, assicurati che l'emulatore Android o il simulatore iOS sia configurato correttamente e venga visualizzato nella barra di stato.

Ad esempio, ecco cosa vedi quando utilizzi Pixel 5 con Android Emulator:

Ecco cosa vedi quando utilizzi iPhone 13 con iOS Simulator:

2. Fai clic su Avvia debug. L'app viene avviata sull'emulatore Android o sul simulatore iOS.

Esplorare l'app iniziale

Nell'app iniziale, nota quanto segue:

• L'interfaccia utente è piuttosto semplice.
• C'è un menu a discesa che consente agli utenti di scegliere un prodotto Google specifico.
• Dopo che gli utenti selezionano il pulsante Genera haiku, l'app Flutter invia il prompt integrato all'endpoint dell'API PaLM, che genera gli haiku.
• L'app mostra gli haiku generati nel widget di testo dopo aver ricevuto una risposta. Tuttavia, se selezioni Genera haiku, non succede nulla perché l'app non può ancora comunicare con l'API PaLM.

3. Configurare l'accesso all'API PaLM

Per utilizzare l'API PaLM, è necessaria una chiave API. Al momento della pubblicazione di questo codelab, l'API PaLM è ancora in anteprima privata.

• Per configurare l'accesso all'API PaLM, segui la documentazione per creare una chiave API, quindi annota la chiave per utilizzarla in un secondo momento in questo codelab.

4. Aggiungere un menu di prodotti Google

Il tuo obiettivo è generare haiku per i prodotti Google. In fase di runtime, l'utente dell'app può scegliere dinamicamente un prodotto da un elenco precompilato di nomi di prodotti.

Per aggiungere un elenco di prodotti Google all'app:

1. In VS Code, vai al file step1/lib/data/repositories/product_repository_impl.dart.
2. Nel corpo della funzione getAllProducts(), aggiungi la seguente variabile che memorizza un array di nomi di prodotti Google:

product_repository_impl .dart

var productData = [
  {'productName': 'Google Search'},
  {'productName': 'YouTube'},
  {'productName': 'Android'},
  {'productName': 'Google Maps'},
  {'productName': 'Gmail'}
];

5. Invia la richiesta all'API PaLM e decodifica la risposta

Il nome del prodotto scelto dall'utente viene combinato con il seguente modello di prompt:

Context: You are an awesome haiku writer. 
Message content: Write a cool haiku about {product name}.

Per inviare questa richiesta all'endpoint dell'API PaLM per generare un haiku, segui questi passaggi:

1. In VS Code, vai al file step2/lib/data/repositories/poem_repository_impl.dart.
2. Nel corpo della funzione getPoems(), aggiungi il seguente codice:

poem_repository_impl.dart

// TODO: Replace YOUR_API_KEY with your API key.
var apiKey = 'YOUR_API_KEY';
const haikuCount = 5;

final url = Uri.parse(
   'https://generativelanguage.googleapis.com/v1beta2/models/chat-bison-001:generateMessage?key=$apiKey');
final headers = {'Content-Type': 'application/json'};
final body = jsonEncode({
 "prompt": {
   "context": "You are an awesome haiku writer.",
   "examples": [
     {
       "input": {"content": "Write a haiku about Google Photos."},
       "output": {
         "content":
             "Google Photos, my friend\nA journey of a lifetime\nCaptured in pixels"
       }
     }
   ],
   "messages": [
     {"content": "Write a cool haiku for $productName"}
   ]
 },
 "candidate_count": haikuCount,
 "temperature": 1,
});

try {
 final response = await http.post(url, headers: headers, body: body);
 if (response.statusCode == 200) {
   final decodedResponse = json.decode(response.body);
   String haikus = 'Here are $haikuCount haikus about $productName:\n\n';
   for (var i = 0; i < haikuCount; i++) {
     haikus += '${i + 1}.\n';
     haikus += decodedResponse['candidates'][i]['content'] + '\n\n';
   }
   return haikus;
 } else {
   return 'Request failed with status: ${response.statusCode}.\n\n${response.body}';
 }
} catch (error) {
 throw Exception('Error sending POST request: $error');
}

Sostituisci la stringa YOUR_API_KEY con la chiave API che hai creato in precedenza.

Una volta ricevuta e decodificata correttamente la risposta, il widget di testo nell'interfaccia utente esegue il rendering degli haiku generati.

Nota:il campo examples nel payload funge da riferimento e indica all'API come generare un testo simile. Questo viene spesso chiamato apprendimento in-context. Puoi fornire più esempi.

Questo codelab non descrive in dettaglio come ottimizzare il prompt o trovare idee per i prompt, ma esiste un intero campo di prompt engineering che studia il modo migliore per scrivere prompt per i modelli LLM. Per saperne di più, prova altri prompt e regola l'interfaccia utente di conseguenza. Consulta questa guida ai prompt per questo dominio emergente.

6. Esegui l'app su piattaforme mobile

1. In VS Code, imposta il dispositivo di destinazione su un dispositivo Android o iOS.
2. Fai clic su Avvia debug, quindi attendi il caricamento dell'app.
3. Seleziona un prodotto dal menu a discesa, quindi seleziona Genera haiku. L'app mostra un haiku sul prodotto selezionato.

7. Esegui l'app sulle piattaforme desktop

Oltre ad Android e iOS, Flutter supporta anche le piattaforme desktop, tra cui Linux, macOS e Windows.

Eseguire l'app su Linux

1. In VS Code, imposta il dispositivo di destinazione su Linux (linux-x64).
2. Fai clic su Avvia debug, quindi attendi il caricamento dell'app.
3. Scegli un prodotto dal menu a discesa, poi seleziona Genera haiku.

Eseguire l'app su macOS

Per macOS, devi configurare i diritti appropriati perché l'app invia richieste HTTP al backend. Per saperne di più, consulta Diritti e sandbox dell'app.

Per eseguire l'app su macOS:

1. Nei file step3/macos/Runner/DebugProfile.entitlements e step3/macos/Runner/Release.entitlements, aggiungi il seguente codice:

DebugProfile.entitlements | Release.entitlements

<key>com.apple.security.network.client</key>
<true/>

2. In VS Code, imposta il dispositivo di destinazione su macOS (darwin) .
3. Fai clic su Avvia debug, quindi attendi il caricamento dell'app.
4. Scegli un prodotto dal menu a discesa, poi seleziona Genera haiku.

Esegui l'app su Windows

1. In VS Code, imposta il dispositivo di destinazione su Windows (windows-x64).
2. Fai clic su Avvia debug e attendi il caricamento dell'app.
3. Scegli un prodotto dal menu a discesa, poi seleziona Genera haiku.

8. Esegui l'app sulla piattaforma web

Puoi anche aggiungere il supporto web all'app Flutter. Per impostazione predefinita, la piattaforma web è attivata automaticamente per le app Flutter, quindi non devi fare altro che avviarla.

Per eseguire l'app sulla piattaforma web, segui questi passaggi:

1. In VS Code, imposta il dispositivo di destinazione su Chrome (web-javascript).
2. Fai clic su Avvia debug e poi attendi il caricamento dell'app in Google Chrome.
3. Scegli un prodotto dal menu a discesa, poi seleziona Genera haiku.

9. Complimenti

Hai creato un'app full stack che genera haiku sui prodotti Google. Sebbene l'app generi haiku solo per alcuni prodotti Google, puoi modificare facilmente il prompt e generare il testo che preferisci. Ora che sai come utilizzare l'API PaLM, puoi creare app straordinarie con l'incredibile potenza degli LLM.

Scopri di più

• API PaLM e MakerSuite: un modo semplice per iniziare a creare prototipi e app di AI generativa
• Google Generative AI
• Flutter