Tentang codelab ini
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
- Buka repositori GitHub ini.
- Klik Code > Download zip guna mendownload semua kode untuk codelab ini.
- Ekstrak file zip yang didownload untuk mengekstrak folder root
codelabs-main
. Anda hanya memerlukan subdirektorihaiku-generator
, yang berisi folder berikut:
- Folder
step0
hinggastep4
, 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
- Di VS Code, klik File > Open folder > codelabs-main > haiku_generator > step0 > lib > main.dart.
- Jika Anda melihat dialog VS Code yang meminta Anda mendownload paket yang diperlukan untuk aplikasi awal, klik Get packages.
- 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 perintahflutter pub get
.
Menjalankan aplikasi awal
- 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:
- 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:
- Di VS Code, buka file
step1/lib/data/repositories/product_repository_impl.dart
. - 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:
- Di VS Code, buka file
step2/lib/data/repositories/poem_repository_impl.dart
. - 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.
6. Menjalankan aplikasi di platform seluler
- Di VS Code, tetapkan perangkat target ke perangkat Android atau iOS.
- Klik
Start debugging, lalu tunggu aplikasi dimuat.
- 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
- Di VS Code, tetapkan perangkat target ke Linux (linux-x64).
- Klik
Start debugging, lalu tunggu aplikasi dimuat.
- 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:
- Di file
step3/macOS/Runner/DebugProfile.entitlements
danstep3/macOS/Runner/Release.entitlements
, tambahkan kode berikut:
DebugProfile.entitlements | Release.entitlements
<key>com.apple.security.network.client</key>
<true/>
- Di VS Code, tetapkan perangkat target ke macOS (darwin) .
- Klik
Start debugging, lalu tunggu aplikasi dimuat.
- Pilih produk dari menu drop-down, lalu pilih Generate haiku!.
Menjalankan aplikasi di Windows
- Di VS Code, tetapkan perangkat target ke Windows (windows-x64).
- Klik
Start debugging, lalu tunggu aplikasi dimuat.
- 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:
- Di VS Code, tetapkan perangkat target ke Chrome (web-javascript).
- Klik
Start debugging, lalu tunggu aplikasi dimuat di Google Chrome.
- 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.