Tworzenie haiku na temat usług Google za pomocą interfejsu PaLM API i Flutter

1. Zanim zaczniesz

Jednym z najbardziej ekscytujących przełomów w uczeniu maszynowym (ML) jest generatywna AI, która na podstawie prostego tekstu lub promptów od użytkowników może tworzyć niesamowite obrazy, tekst, dźwięk, a nawet filmy. W szczególności dzięki udostępnieniu PaLM API Google umożliwia deweloperom tworzenie kategorii aplikacji z przyjemnymi wrażeniami użytkownika, które zostały na nowo opracowane z wykorzystaniem technologii PaLM.

W tym ćwiczeniu utworzysz aplikację, która za pomocą interfejsu PaLM API będzie generować haiku na podstawie nazw usług Google. Za pomocą Fluttera możesz też utworzyć aplikację na wielu platformach, która wyświetla haiku.

Wymagania wstępne

• Podstawowa wiedza o dużych modelach językowych (LLM), np. o promptach
• Podstawowa znajomość tworzenia aplikacji w Flutterze za pomocą języka Dart.

Czego się nauczysz

• Jak korzystać z interfejsu PaLM API od Google.
• Jak utworzyć aplikację Flutter na wielu platformach do wyświetlania wyników.

Czego potrzebujesz

• Pakiet SDK Flutter
• Edytor tekstu, np. Visual Studio Code (VS Code).
• Konfiguracja VS Code dla Fluttera i Darta
• Konfiguracja Android lub iOS dla Fluttera (w tym emulatorów i symulatorów)
• Konfiguracja komputera na potrzeby Fluttera w systemie Windows, Linux lub macOS
• Konfigurowanie internetu w przypadku Fluttera
• klucz interfejsu PaLM API,

2. Konfiguracja

Pobierz kod startowy

1. Otwórz to repozytorium GitHub.
2. Aby pobrać cały kod do tych ćwiczeń z programowania, kliknij Code > Download zip (Kod > Pobierz plik ZIP).
3. Rozpakuj pobrany plik ZIP, aby rozpakować folder główny codelabs-main. Potrzebny jest tylko podkatalog haiku-generator, który zawiera te foldery:

• Foldery step0–step3, które zawierają kod startowy, na którym będziesz pracować w każdym kroku tego ćwiczenia.
• Folder finished, który zawiera gotowy kod ukończonej przykładowej aplikacji.

Pobieranie zależności projektu

1. W VS Code kliknij File > Open folder > codelabs-main > haiku_generator > step0 > lib > main.dart (Plik > Otwórz folder > codelabs-main > haiku_generator > step0 > lib > main.dart).
2. Jeśli zobaczysz okno VS Code z prośbą o pobranie wymaganych pakietów dla aplikacji startowej, kliknij Get packages (Pobierz pakiety).

3. Jeśli nie widzisz okna VS Code z prośbą o pobranie wymaganych pakietów dla aplikacji startowej, otwórz terminal, a następnie przejdź do folderu step0 i uruchom polecenie flutter pub get.

Uruchamianie aplikacji startowej

1. W VS Code sprawdź, czy Android Emulator lub symulator iOS jest prawidłowo skonfigurowany i wyświetla się na pasku stanu.

Oto przykład tego, co zobaczysz, gdy użyjesz Pixela 5 z emulatorem Androida:

Oto co zobaczysz, gdy użyjesz iPhone'a 13 z symulatorem iOS:

2. Kliknij  Rozpocznij debugowanie. Aplikacja uruchomi się w Android Emulator lub iOS Simulator.

Poznaj aplikację startową

W aplikacji startowej zwróć uwagę na te kwestie:

• Interfejs jest dość prosty.
• Jest tam menu, które umożliwia użytkownikom wybór konkretnej usługi Google.
• Gdy użytkownicy klikną przycisk Wygeneruj haiku!, aplikacja Flutter wysyła wbudowany prompt do punktu końcowego interfejsu PaLM API, który generuje haiku.
• Po otrzymaniu odpowiedzi aplikacja wyświetla wygenerowane haiku w widżecie tekstowym. Jeśli jednak wybierzesz Generate haiku! (Wygeneruj haiku!), nic się nie stanie, ponieważ aplikacja nie może jeszcze komunikować się z interfejsem PaLM API.

3. Konfigurowanie dostępu do interfejsu PaLM API

Aby korzystać z interfejsu PaLM API, musisz mieć klucz interfejsu API. W momencie publikacji tego samouczka interfejs PaLM API jest nadal dostępny w ramach prywatnej wersji przedpremierowej.

• Aby skonfigurować dostęp do interfejsu PaLM API, postępuj zgodnie z instrukcjami w dokumentacji, aby utworzyć klucz interfejsu API, a następnie zanotuj go, aby użyć go później w tym ćwiczeniu.

4. Dodawanie menu usług Google

Twoim celem jest tworzenie haiku dla usług Google. Podczas działania aplikacji użytkownik może dynamicznie wybrać produkt z wcześniej wypełnionej listy nazw produktów.

Aby dodać listę usług Google do aplikacji, wykonaj te czynności:

1. W VS Code otwórz plik step1/lib/data/repositories/product_repository_impl.dart.
2. W treści funkcji getAllProducts() dodaj tę zmienną, która przechowuje tablicę nazw usług Google:

product_repository_impl .dart

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

5. Wysyłanie żądania do interfejsu PaLM API i dekodowanie odpowiedzi

Nazwa produktu wybrana przez użytkownika jest łączona z tym szablonem promptu:

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

Aby wysłać to żądanie do punktu końcowego interfejsu PaLM API i wygenerować haiku, wykonaj te czynności:

1. W VS Code otwórz plik step2/lib/data/repositories/poem_repository_impl.dart.
2. W treści funkcji getPoems() dodaj ten kod:

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

Zastąp ciąg YOUR_API_KEY kluczem interfejsu API z wcześniejszego etapu.

Po otrzymaniu i odkodowaniu odpowiedzi widżet tekstowy w interfejsie wyświetla wygenerowane haiku.

Uwaga: pole examples w ładunku służy jako odniesienie i informuje interfejs API, jak generować podobny tekst. Jest to często nazywane uczeniem w kontekście. Możesz podać kilka przykładów.

To ćwiczenie nie zawiera szczegółowych informacji o tym, jak dostosowywać prompty ani jak wymyślać pomysły na prompty, ale istnieje cała dziedzina inżynierii promptów, która zajmuje się badaniem najlepszych sposobów pisania promptów dla LLM. Aby dowiedzieć się więcej, wypróbuj inne prompty i dostosuj interfejs, a także zapoznaj się z tym przewodnikiem po tworzeniu promptów dotyczącym tej nowej dziedziny.

6. Uruchamianie aplikacji na platformach mobilnych

1. W VS Code ustaw urządzenie docelowe na urządzenie z Androidem lub iOS.
2. Kliknij  Rozpocznij debugowanie, a następnie poczekaj na wczytanie aplikacji.
3. Wybierz produkt z menu, a następnie kliknij Generate haiku! (Wygeneruj haiku!). Aplikacja wyświetla haiku o wybranym produkcie.

7. Uruchamianie aplikacji na platformach komputerowych

Oprócz Androida i iOS Flutter obsługuje też platformy desktopowe, w tym Linux, macOS i Windows.

Uruchamianie aplikacji w systemie Linux

1. W VS Code ustaw urządzenie docelowe na Linux (linux-x64).
2. Kliknij  Rozpocznij debugowanie, a następnie poczekaj na wczytanie aplikacji.
3. Wybierz produkt z menu, a następnie kliknij Generate haiku! (Wygeneruj haiku!).

Uruchamianie aplikacji w macOS

W przypadku macOS musisz skonfigurować odpowiednie uprawnienia, ponieważ aplikacja wysyła żądania HTTP do backendu. Więcej informacji znajdziesz w artykule Uprawnienia i piaskownica aplikacji.

Aby uruchomić aplikację w systemie macOS:

1. W plikach step3/macos/Runner/DebugProfile.entitlements i step3/macos/Runner/Release.entitlements dodaj ten kod:

DebugProfile.entitlements | Release.entitlements

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

2. W VS Code ustaw urządzenie docelowe na macOS (darwin) .
3. Kliknij  Rozpocznij debugowanie, a następnie poczekaj na wczytanie aplikacji.
4. Wybierz produkt z menu, a następnie kliknij Generate haiku! (Wygeneruj haiku!).

Uruchamianie aplikacji w systemie Windows

1. W VS Code ustaw urządzenie docelowe na Windows (windows-x64).
2. Kliknij  Rozpocznij debugowanie, a następnie poczekaj na wczytanie aplikacji.
3. Wybierz produkt z menu, a następnie kliknij Generate haiku! (Wygeneruj haiku!).

8. Uruchamianie aplikacji na platformie internetowej

Możesz też dodać obsługę internetu do aplikacji Flutter. Platforma internetowa jest domyślnie włączona w przypadku aplikacji Flutter, więc wystarczy ją uruchomić.

Aby uruchomić aplikację na platformie internetowej, wykonaj te czynności:

1. W VS Code ustaw urządzenie docelowe na Chrome (web-javascript).
2. Kliknij  Rozpocznij debugowanie, a potem poczekaj, aż aplikacja wczyta się w Google Chrome.
3. Wybierz produkt z menu, a następnie kliknij Generate haiku! (Wygeneruj haiku!).

9. Gratulacje

Utworzono aplikację full stack, która generuje haiku o usługach Google. Aplikacja generuje haiku tylko w przypadku wybranych usług Google, ale możesz łatwo zmienić prompta i wygenerować dowolny tekst. Teraz, gdy wiesz już, jak korzystać z interfejsu PaLM API, możesz tworzyć niesamowite aplikacje z wykorzystaniem ogromnych możliwości modeli LLM.

Więcej informacji

• PaLM API i MakerSuite: przystępny sposób na rozpoczęcie prototypowania i tworzenia aplikacji wykorzystujących generatywną AI
• Generatywna AI od Google
• Flutter