Mit der PaLM API und Flutter Haikus über Google-Produkte erstellen

1. Hinweis

Einer der spannendsten Durchbrüche im Bereich des maschinellen Lernens (ML) ist die generative KI, die auf der Grundlage einfacher Texte oder Prompts von Nutzern beeindruckende Bilder, Texte, Audioinhalte und sogar Videos erstellen kann. Mit der Veröffentlichung der PaLM API ermöglicht Google Entwicklern, App-Kategorien mit einer ansprechenden Nutzerfreundlichkeit zu entwickeln, die mit der PaLM-Technologie neu konzipiert wurden.

In diesem Codelab erstellen Sie eine App, die die PaLM API verwendet, um Haikus basierend auf Google-Produktnamen zu generieren. Außerdem verwenden Sie Flutter, um eine plattformübergreifende App zu erstellen, in der die Haikus angezeigt werden.

Vorbereitung

• Grundkenntnisse zu Large Language Models (LLMs), z. B. zu Prompts
• Grundkenntnisse der Flutter-Entwicklung mit Dart

Lerninhalte

• Verwendung der PaLM API von Google.
• So erstellen Sie eine plattformübergreifende Flutter-App, um die Ergebnisse anzuzeigen.

Voraussetzungen

• Das Flutter SDK
• Einen Texteditor wie Visual Studio Code (VS Code)
• VS Code für Flutter und Dart einrichten
• Android- oder iOS-Einrichtung für Flutter (einschließlich Emulatoren und Simulatoren)
• Desktop-Einrichtung für Flutter für Windows, Linux oder macOS
• Web für Flutter einrichten
• Einen API-Schlüssel für die PaLM API

2. Einrichten

Startcode herunterladen

1. Rufen Sie dieses GitHub-Repository auf.
2. Klicken Sie auf Code > Download zip, um den gesamten Code für dieses Codelab herunterzuladen.
3. Entpacken Sie die heruntergeladene ZIP-Datei, um einen codelabs-main-Stammordner zu entpacken. Sie benötigen nur das Unterverzeichnis haiku-generator, das die folgenden Ordner enthält:

• Die Ordner step0 bis step3, die den Startcode enthalten, auf dem Sie für jeden Schritt in diesem Codelab aufbauen.
• Der Ordner finished, der den vollständigen Code der fertigen Beispiel-App enthält.

Projektabhängigkeiten herunterladen

1. Klicken Sie in VS Code auf Datei > Ordner öffnen > codelabs-main > haiku_generator > step0 > lib > main.dart.
2. Wenn in VS Code ein Dialogfeld angezeigt wird, in dem Sie aufgefordert werden, die erforderlichen Pakete für die Starter-App herunterzuladen, klicken Sie auf Pakete herunterladen.

3. Wenn kein VS Code-Dialogfeld angezeigt wird, in dem Sie aufgefordert werden, die erforderlichen Pakete für die Starter-App herunterzuladen, öffnen Sie das Terminal, wechseln Sie zum Ordner step0 und führen Sie den Befehl flutter pub get aus.

Start-App ausführen

1. Achten Sie darauf, dass der Android-Emulator oder iOS-Simulator in VS Code richtig eingerichtet ist und in der Statusleiste angezeigt wird.

So sieht es beispielsweise aus, wenn Sie das Pixel 5 mit dem Android-Emulator verwenden:

So sieht es aus, wenn Sie das iPhone 13 mit dem iOS-Simulator verwenden:

2. Klicken Sie auf  Fehlerbehebung starten. Die App wird im Android-Emulator oder iOS-Simulator gestartet.

Start-App ausprobieren

Beachten Sie in der Starter-App Folgendes:

• Die Benutzeroberfläche ist recht einfach.
• Über ein Drop-down-Menü können Nutzer ein bestimmtes Google-Produkt auswählen.
• Nachdem Nutzer die Schaltfläche Haiku generieren! ausgewählt haben, sendet die Flutter-App den integrierten Prompt an den PaLM API-Endpunkt, der Haikus generiert.
• Die App zeigt die generierten Haikus im Text-Widget an, nachdem sie eine Antwort erhalten hat. Wenn Sie jedoch Generate haiku! auswählen, passiert nichts, da die App noch nicht mit der PaLM API kommunizieren kann.

3. Zugriff auf die PaLM API einrichten

Für die Verwendung der PaLM API benötigen Sie einen API-Schlüssel. Zum Zeitpunkt der Veröffentlichung dieses Codelabs befindet sich die PaLM API noch in der privaten Vorschau.

• Folgen Sie der Dokumentation, um einen API-Schlüssel zu erstellen und ihn für die spätere Verwendung in diesem Codelab zu notieren.

4. Menü mit Google-Produkten hinzufügen

Ihr Ziel ist es, Haikus für Google-Produkte zu generieren. Zur Laufzeit kann der App-Nutzer dynamisch ein Produkt aus einer Liste mit Produktnamen auswählen.

So fügen Sie der App eine Liste von Google-Produkten hinzu:

1. Rufen Sie in VS Code die Datei step1/lib/data/repositories/product_repository_impl.dart auf.
2. Fügen Sie im Hauptteil der Funktion getAllProducts() die folgende Variable hinzu, in der ein Array mit Google-Produktnamen gespeichert wird:

product_repository_impl .dart

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

5. Anfrage an die PaLM API senden und Antwort decodieren

Der vom Nutzer ausgewählte Produktname wird mit der folgenden Prompt-Vorlage kombiniert:

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

So senden Sie diese Anfrage an den PaLM API-Endpunkt, um ein Haiku zu generieren:

1. Rufen Sie in VS Code die Datei step2/lib/data/repositories/poem_repository_impl.dart auf.
2. Fügen Sie im Funktionskörper von getPoems() den folgenden Code hinzu:

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');
}

Ersetzen Sie den String YOUR_API_KEY durch Ihren API-Schlüssel von zuvor.

Nachdem die Antwort empfangen und erfolgreich decodiert wurde, werden die generierten Haikus im Text-Widget in der Benutzeroberfläche gerendert.

Hinweis:Das Feld examples in der Nutzlast dient als Referenz und gibt der API an, wie ähnlicher Text generiert werden soll. Dies wird oft als In-Context Learning bezeichnet. Sie können mehrere Beispiele angeben.

In diesem Codelab wird nicht im Detail darauf eingegangen, wie Sie den Prompt optimieren oder Prompt-Ideen entwickeln. Es gibt jedoch ein ganzes Feld des Prompt-Engineerings, in dem untersucht wird, wie Prompts für LLMs am besten geschrieben werden. Weitere Informationen erhalten Sie, wenn Sie mit anderen Prompts experimentieren und die Benutzeroberfläche entsprechend anpassen. Außerdem finden Sie in diesem Prompt-Leitfaden Informationen zu diesem neuen Bereich.

6. App auf mobilen Plattformen ausführen

1. Legen Sie in VS Code das Zielgerät auf ein Android- oder iOS-Gerät fest.
2. Klicken Sie auf  Fehlerbehebung starten und warten Sie, bis die App geladen ist.
3. Wählen Sie im Drop-down-Menü ein Produkt aus und klicken Sie dann auf Generate haiku! (Haiku generieren). Die App zeigt ein Haiku zum ausgewählten Produkt an.

7. App auf Desktop-Plattformen ausführen

Neben Android und iOS unterstützt Flutter auch Desktop-Plattformen wie Linux, macOS und Windows.

App unter Linux ausführen

1. Legen Sie in VS Code das Zielgerät auf Linux (linux-x64) fest.
2. Klicken Sie auf  Fehlerbehebung starten und warten Sie, bis die App geladen ist.
3. Wählen Sie im Drop-down-Menü ein Produkt aus und klicken Sie dann auf Generate haiku! (Haiku generieren).

App unter macOS ausführen

Unter macOS müssen Sie entsprechende Berechtigungen einrichten, da die App HTTP-Anfragen an das Backend sendet. Weitere Informationen finden Sie unter Berechtigungen und die App-Sandbox.

So führen Sie die App unter macOS aus:

1. Fügen Sie in den Dateien step3/macos/Runner/DebugProfile.entitlements und step3/macos/Runner/Release.entitlements den folgenden Code hinzu:

DebugProfile.entitlements | Release.entitlements

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

2. Legen Sie in VS Code das Zielgerät auf macOS (darwin) fest .
3. Klicken Sie auf  Fehlerbehebung starten und warten Sie, bis die App geladen ist.
4. Wählen Sie im Drop-down-Menü ein Produkt aus und klicken Sie dann auf Generate haiku! (Haiku generieren).

App unter Windows ausführen

1. Legen Sie in VS Code das Zielgerät auf Windows (windows-x64) fest.
2. Klicken Sie auf  Fehlerbehebung starten und warten Sie, bis die App geladen ist.
3. Wählen Sie im Drop-down-Menü ein Produkt aus und klicken Sie dann auf Generate haiku! (Haiku generieren).

8. App auf der Webplattform ausführen

Sie können der Flutter-App auch Webunterstützung hinzufügen. Standardmäßig ist die Webplattform für Flutter-Apps automatisch aktiviert. Sie müssen die App also nur starten.

So führen Sie die App auf der Webplattform aus:

1. Legen Sie in VS Code das Zielgerät auf Chrome (web-javascript) fest.
2. Klicken Sie auf  Debuggen starten und warten Sie, bis die App in Google Chrome geladen wird.
3. Wählen Sie im Drop-down-Menü ein Produkt aus und klicken Sie dann auf Generate haiku! (Haiku generieren).

9. Glückwunsch

Sie haben eine Full-Stack-App erstellt, die Haikus über Google-Produkte generiert. Die App generiert zwar nur Haikus für ausgewählte Google-Produkte, Sie können den Prompt aber ganz einfach ändern und den gewünschten Text generieren lassen. Jetzt wissen Sie, wie Sie die PaLM API verwenden, und können beeindruckende Apps mit der unglaublichen Leistungsfähigkeit von LLMs erstellen.

Weitere Informationen

• PaLM API & MakerSuite: An approachable way to start prototyping and building generative AI apps
• Generative KI von Google
• Flutter