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

1. Hinweis

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

In diesem Codelab erstellen Sie eine App, mit der Sie mit der PaLM API Haikus basierend auf Google-Produktnamen generieren können. 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) wie Prompting
• Grundkenntnisse zur Flutter-Entwicklung mit Dart

Lerninhalte

• Verwendung der PaLM API von Google
• Erstellen einer plattformübergreifenden Flutter-App zur Anzeige der Ergebnisse

Voraussetzungen

• Das Flutter SDK
• Ein Texteditor wie Visual Studio Code (VS Code)
• VS Code-Einrichtung für Flutter und Dart
• Android- oder iOS-Einrichtung für Flutter (einschließlich Emulatoren und Simulatoren)
• Desktop-Einrichtung für Flutter für Windows, Linux oder macOS
• Web-Einrichtung für Flutter
• Ein 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 mit dem Startcode, auf dem Sie für jeden Schritt in diesem Codelab aufbauen.
• Der Ordner finished mit dem vollständigen Code für die fertige Beispiel-App.

Projektabhängigkeiten herunterladen

1. Klicken Sie in VS Code auf Datei > Ordner öffnen > codelabs-main > haiku_generator > step0 > lib > main.dart.
2. Wenn ein VS Code-Dialogfeld angezeigt wird, in dem Sie aufgefordert werden, die erforderlichen Pakete für die Start-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 Start-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 in VS Code darauf, dass der Android Emulator oder iOS Simulator richtig eingerichtet ist und in der Statusleiste angezeigt wird.

Hier sehen Sie beispielsweise, was angezeigt wird, wenn Sie Pixel 5 mit dem Android Emulator verwenden:

Hier sehen Sie, was angezeigt wird, 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 Start-App Folgendes:

• Die Benutzeroberfläche ist recht einfach.
• Es gibt ein Drop-down-Menü, in dem Nutzer ein bestimmtes Google-Produkt auswählen können.
• 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 Haiku generieren auswählen, passiert nichts, da die App noch nicht mit der PaLM API kommunizieren kann.

3. Zugriff auf die PaLM API einrichten

Sie benötigen einen API-Schlüssel, um die PaLM API zu verwenden. Zum Zeitpunkt der Veröffentlichung dieses Codelabs befindet sich die PaLM API noch in der privaten Vorschau.

• Folgen Sie der Dokumentation, um den Zugriff auf die PaLM API einzurichten und einen API-Schlüssel zu erstellen. Notieren Sie sich den Schlüssel, um ihn später in diesem Codelab zu verwenden.

4. Menü mit Google-Produkten hinzufügen

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

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

1. Wechseln Sie in VS Code zur Datei step1/lib/data/repositories/product_repository_impl.dart.
2. Fügen Sie im Textkörper der Funktion getAllProducts() die folgende Variable hinzu, die ein Array von Google-Produktnamen speichert:

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. Wechseln Sie in VS Code zur Datei step2/lib/data/repositories/poem_repository_impl.dart.
2. Fügen Sie im Textkörper der Funktion 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 oben.

Nachdem die Antwort empfangen und erfolgreich decodiert wurde, werden die generierten Haikus im Text-Widget auf 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-Lernen bezeichnet. Sie können mehrere Beispiele angeben.

In diesem Codelab wird nicht im Detail erläutert, wie Sie den Prompt abstimmen oder Prompt-Ideen entwickeln. Es gibt jedoch ein ganzes Feld des Prompt-Engineerings, in dem untersucht wird, wie Prompts am besten für LLMs geschrieben werden. Weitere Informationen finden Sie unter Prompt-Engineering für generative KI-Modelle. Spielen Sie mit anderen Prompts und passen Sie die Benutzeroberfläche entsprechend an. Siehe auch diesen Prompt-Leitfaden für diesen 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 wurde.
3. Wählen Sie im Drop-down-Menü ein Produkt aus und klicken Sie dann auf 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 wurde.
3. Wählen Sie im Drop-down-Menü ein Produkt aus und klicken Sie dann auf Haiku generieren.

App unter macOS ausführen

Für macOS müssen Sie die entsprechenden 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 wurde.
4. Wählen Sie im Drop-down-Menü ein Produkt aus und klicken Sie dann auf 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 wurde.
3. Wählen Sie im Drop-down-Menü ein Produkt aus und klicken Sie dann auf 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 sie 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 Fehlerbehebung starten und warten Sie, bis die App in Google Chrome geladen wurde.
3. Wählen Sie im Drop-down-Menü ein Produkt aus und klicken Sie dann auf Haiku generieren.

9. Glückwunsch

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

Weitere Informationen

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