Membuat haiku tentang produk Google dengan PaLM API dan Flutter

1. Sebelum memulai

Salah satu terobosan machine learning (ML) yang paling menarik adalah AI generatif, yang dapat menghasilkan gambar, teks, audio, dan bahkan video keren berdasarkan teks sederhana—atau perintah—dari pengguna. Secara khusus, dengan dirilisnya PaLM API, Google meningkatkan kemampuan developer untuk membangun kategori aplikasi dengan pengalaman pengguna yang menyenangkan yang ditata ulang dengan teknologi PaLM.

Dalam codelab ini, Anda akan membangun aplikasi yang menggunakan PaLM API untuk membuat haiku berdasarkan nama produk Google. Anda juga akan menggunakan Flutter untuk membuat aplikasi lintas platform yang menampilkan haiku tersebut.

Prasyarat

• Pengetahuan dasar tentang Model Bahasa Besar (LLM), seperti pemberian perintah
• Pengetahuan dasar tentang pengembangan Flutter dengan Dart

Yang akan Anda pelajari

• Cara menggunakan PaLM API dari Google.
• Cara membangun aplikasi Flutter lintas platform untuk menampilkan hasilnya.

Yang Anda butuhkan

• Flutter SDK
• Editor teks, seperti Kode Visual Studio (VS Code)
• Penyiapan VS Code untuk Flutter dan Dart
• Penyiapan Android atau iOS untuk Flutter (termasuk emulator dan simulator)
• Penyiapan Desktop untuk Flutter untuk Windows, Linux, atau macOS
• Penyiapan Web untuk Flutter
• Kunci API untuk PaLM API

2. Memulai persiapan

Mendownload kode awal

1. Buka repositori GitHub ini.
2. Klik Code > Download zip guna mendownload semua kode untuk codelab ini.
3. Ekstrak file zip yang didownload untuk mengekstrak folder root codelabs-main. Anda hanya memerlukan subdirektori haiku-generator, yang berisi folder berikut:

• Folder step0 hingga step4, yang berisi kode awal yang Anda bangun untuk setiap langkah dalam codelab ini.
• Folder finished, yang berisi kode yang sudah selesai untuk aplikasi contoh yang telah selesai.

Mendownload dependensi project

1. Di VS Code, klik File > Open folder > codelabs-main > haiku_generator > step0 > lib > main.dart.
2. Jika Anda melihat dialog VS Code yang meminta Anda mendownload paket yang diperlukan untuk aplikasi awal, klik Get packages.

3. Jika Anda tidak melihat dialog VS Code yang meminta Anda mendownload paket yang diperlukan untuk aplikasi awal, buka terminal Anda, lalu buka folder step0 dan jalankan perintah flutter pub get.

Menjalankan aplikasi awal

1. Di VS Code, pastikan Android Emulator atau Simulator iOS disiapkan dengan benar dan muncul di status bar.

Misalnya, berikut adalah tampilan yang Anda lihat saat menggunakan Pixel 5 dengan Android Emulator:

Berikut adalah tampilan yang Anda lihat saat menggunakan iPhone 13 dengan Simulator iOS:

2. Klik Start debugging. Aplikasi akan diluncurkan di Android Emulator atau Simulator iOS.

Menjelajahi aplikasi awal

Di aplikasi awal, perhatikan hal-hal berikut:

• UI-nya cukup sederhana.
• Ada menu drop-down yang dapat digunakan untuk memilih produk Google tertentu.
• Setelah pengguna memilih tombol Generate haiku!, aplikasi Flutter akan mengirimkan perintah bawaan ke endpoint PaLM API, yang menghasilkan haiku.
• Aplikasi akan menampilkan haiku yang dihasilkan dalam widget teks setelah menerima respons. Namun, jika Anda memilih Generate haiku!, tidak akan terjadi apa-apa karena aplikasi belum dapat berkomunikasi dengan PaLM API.

3. Menyiapkan akses ke PaLM API

Anda memerlukan kunci API untuk menggunakan PaLM API. Pada saat publikasi codelab ini, PaLM API masih dalam tahap pratinjau pribadi.

• Untuk menyiapkan akses ke PaLM API, baca dokumentasi yang Anda terima untuk membuat kunci API, lalu catat kunci tersebut untuk digunakan nanti dalam codelab ini.

4. Menambahkan menu produk Google

Sasaran Anda adalah membuat haiku untuk produk Google. Saat runtime, pengguna aplikasi dapat memilih produk secara dinamis dari daftar nama produk yang terisi otomatis.

Untuk menambahkan daftar produk Google ke aplikasi, ikuti langkah-langkah berikut:

1. Di VS Code, buka file step1/lib/data/repositories/product_repository_impl.dart.
2. Dalam isi fungsi getAllProducts(), tambahkan variabel berikut yang menyimpan array nama produk Google:

product_repository_impl .dart

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

5. Mengirim permintaan ke PaLM API dan mendekode responsnya

Nama produk yang dipilih pengguna akan digabungkan dengan template perintah berikut:

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

Untuk mengirim permintaan ini ke endpoint PaLM API guna membuat haiku, ikuti langkah-langkah berikut:

1. Di VS Code, buka file step2/lib/data/repositories/poem_repository_impl.dart.
2. Pada isi fungsi getPoems(), tambahkan kode berikut:

poem_repository_impl.dart

const haikuCount = 5;
// Replace the YOUR_API_KEY environment variable placeholder with your API key.
final apiKey = dotenv.env['YOUR_API_KEY']!;
final url = Uri.parse(      'https://generativelanguage.googleapis.com/v1beta1/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 of about $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');
}

Ganti variabel lingkungan YOUR_API_KEY dengan kunci API yang sudah Anda peroleh sebelumnya.

Setelah respons berhasil diterima dan didekode, widget teks di UI akan merender haiku yang dihasilkan.

Catatan: Kolom examples dalam payload berfungsi sebagai referensi dan memberi tahu API cara membuat teks serupa. Hal ini sering disebut sebagai pembelajaran dalam konteks. Anda dapat memberikan beberapa contoh.

Codelab ini tidak membahas detail tentang cara menyesuaikan perintah atau memikirkan ide perintah, tetapi ada bidang tersendiri terkait rekayasa perintah yang mempelajari cara terbaik menulis perintah untuk model bahasa besar (LLM). Untuk mengetahui informasi lebih lanjut, bereksperimenlah dengan perintah lainnya dan sesuaikan UI, serta baca referensi tambahan di domain baru ini.

6. Menjalankan aplikasi di platform seluler

1. Di VS Code, tetapkan perangkat target ke perangkat Android atau iOS.
2. Klik Start debugging, lalu tunggu aplikasi dimuat.
3. Pilih produk dari menu drop-down, lalu pilih Generate haiku!. Aplikasi akan menampilkan haiku tentang produk yang dipilih.

7. Menjalankan aplikasi di platform desktop

Selain Android dan iOS, Flutter juga mendukung platform desktop, termasuk Linux, macOS, dan Windows.

Menjalankan aplikasi di Linux

1. Di VS Code, tetapkan perangkat target ke Linux (linux-x64).
2. Klik Start debugging, lalu tunggu aplikasi dimuat.
3. Pilih produk dari menu drop-down, lalu pilih Generate haiku!.

Menjalankan aplikasi di macOS

Untuk macOS, Anda perlu menyiapkan hak yang sesuai karena aplikasi akan mengirimkan permintaan HTTP ke backend. Untuk mengetahui info selengkapnya, buka Hak dan App Sandbox.

Untuk menjalankan aplikasi di macOS, ikuti langkah-langkah berikut:

1. Di file step3/macOS/Runner/DebugProfile.entitlements dan step3/macOS/Runner/Release.entitlements, tambahkan kode berikut:

DebugProfile.entitlements | Release.entitlements

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

2. Di VS Code, tetapkan perangkat target ke macOS (darwin) .
3. Klik Start debugging, lalu tunggu aplikasi dimuat.
4. Pilih produk dari menu drop-down, lalu pilih Generate haiku!.

Menjalankan aplikasi di Windows

1. Di VS Code, tetapkan perangkat target ke Windows (windows-x64).
2. Klik Start debugging, lalu tunggu aplikasi dimuat.
3. Pilih produk dari menu drop-down, lalu pilih Generate haiku!.

8. Menjalankan aplikasi di platform web

Anda juga dapat menambahkan dukungan web ke aplikasi Flutter. Secara default, platform web diaktifkan secara otomatis untuk aplikasi Flutter, sehingga Anda hanya perlu meluncurkannya.

Untuk menjalankan aplikasi di platform web, ikuti langkah-langkah berikut:

1. Di VS Code, tetapkan perangkat target ke Chrome (web-javascript).
2. Klik Start debugging, lalu tunggu aplikasi dimuat di Google Chrome.
3. Pilih produk dari menu drop-down, lalu pilih Generate haiku!.

9. Selamat

Anda telah membangun aplikasi full stack yang menghasilkan haiku tentang produk Google. Meskipun aplikasi ini hanya menghasilkan haiku untuk produk Google tertentu, Anda dapat mengubah perintah dengan mudah dan membuat teks yang diinginkan. Setelah mengetahui cara menggunakan PaLM API, Anda dapat membuat aplikasi keren dengan kecanggihan LLM yang efektif.

Pelajari lebih lanjut

• PaLM API & MakerSuite: Cara yang mudah dilakukan untuk memulai pembuatan prototipe dan membangun aplikasi AI generatif
• Flutter