Tạo các bài thơ haiku về các sản phẩm của Google bằng PaLM API và Flutter

1. Trước khi bắt đầu

Một trong những bước đột phá thú vị nhất trong công nghệ học máy (ML) là AI tạo sinh. Công nghệ này có thể tạo ra hình ảnh, văn bản, âm thanh và thậm chí cả video tuyệt vời dựa trên văn bản đơn giản (hoặc câu lệnh) của người dùng. Cụ thể, với việc phát hành PaLM API, Google giúp các nhà phát triển xây dựng nhiều danh mục ứng dụng có trải nghiệm người dùng thú vị nhờ công nghệ PaLM.

Trong lớp học lập trình này, bạn sẽ tạo một ứng dụng sử dụng PaLM API để tạo thơ hai câu dựa trên tên sản phẩm của Google. Bạn cũng sử dụng Flutter để tạo một ứng dụng nhiều nền tảng hiển thị các bài thơ hai câu.

Điều kiện tiên quyết

  • Kiến thức cơ bản về Mô hình ngôn ngữ lớn (LLM), chẳng hạn như câu lệnh
  • Kiến thức cơ bản về cách phát triển Flutter bằng Dart

Kiến thức bạn sẽ học được

  • Cách sử dụng PaLM API của Google.
  • Cách tạo một ứng dụng Flutter nhiều nền tảng để hiển thị kết quả.

Bạn cần có

2. Bắt đầu thiết lập

Tải mã khởi động xuống

  1. Chuyển đến kho lưu trữ GitHub này.
  2. Nhấp vào Code > Download zip (Mã > Tải xuống tệp ZIP) để tải tất cả mã cho lớp học lập trình này xuống.
  3. Giải nén tệp zip đã tải xuống để giải nén một thư mục gốc codelabs-main. Bạn chỉ cần thư mục con haiku-generator, trong đó có các thư mục sau:
  • Các thư mục step0 đến step3 chứa mã khởi đầu mà bạn sẽ dùng để xây dựng cho từng bước trong lớp học lập trình này.
  • Thư mục finished chứa mã hoàn chỉnh cho ứng dụng mẫu đã hoàn thành.

Tải các phần phụ thuộc của dự án xuống

  1. Trong VS Code, hãy nhấp vào File > Open folder > codelabs-main > haiku_generator > step0 > lib > main.dart (Tệp > Mở thư mục > codelabs-main > haiku_generator > step0 > lib > main.dart).
  2. Nếu bạn thấy một hộp thoại VS Code nhắc bạn tải các gói cần thiết cho ứng dụng khởi đầu xuống, hãy nhấp vào Get packages (Tải gói xuống).

Hộp thoại VS Code nhắc bạn tải các gói cần thiết cho ứng dụng khởi đầu.

  1. Nếu bạn không thấy hộp thoại VS Code nhắc bạn tải các gói cần thiết cho ứng dụng khởi đầu, hãy mở thiết bị đầu cuối, rồi chuyển đến thư mục step0 và chạy lệnh flutter pub get.

Chạy ứng dụng khởi đầu

  1. Trong VS Code, hãy đảm bảo rằng Trình mô phỏng Android hoặc Trình mô phỏng iOS được thiết lập đúng cách và xuất hiện trên thanh trạng thái.

Ví dụ: sau đây là những gì bạn thấy khi sử dụng Pixel 5 với Trình mô phỏng Android:

Thanh trạng thái có Pixel 5 được chọn làm thiết bị

Sau đây là những gì bạn thấy khi sử dụng iPhone 13 với Trình mô phỏng iOS:

Thanh trạng thái có iPhone 13 được chọn làm thiết bị

  1. Nhấp vào a19a0c68bc4046e6.png Bắt đầu gỡ lỗi. Ứng dụng sẽ chạy trên Trình mô phỏng Android hoặc Trình mô phỏng iOS.

Khám phá ứng dụng khởi đầu

Trong ứng dụng khởi đầu, hãy lưu ý những điều sau:

  • Giao diện người dùng khá đơn giản.
  • Có một trình đơn thả xuống cho phép người dùng chọn một sản phẩm cụ thể của Google.
  • Sau khi người dùng chọn nút Tạo bài thơ hai câu!, ứng dụng Flutter sẽ gửi câu lệnh tích hợp đến điểm cuối PaLM API để tạo bài thơ hai câu.
  • Sau khi nhận được câu trả lời, ứng dụng sẽ hiển thị các bài thơ hai câu được tạo trong tiện ích văn bản. Tuy nhiên, nếu bạn chọn Tạo bài thơ hai câu! thì sẽ không có gì xảy ra vì ứng dụng chưa thể giao tiếp với API PaLM.

Ứng dụng khởi đầu trên iOS Ứng dụng khởi đầu trên Android

3. Thiết lập quyền truy cập vào API PaLM

Bạn cần có khoá API để sử dụng PaLM API. Tại thời điểm xuất bản lớp học lập trình này, API PaLM vẫn đang ở chế độ xem trước riêng tư.

  • Để thiết lập quyền truy cập vào PaLM API, hãy làm theo tài liệu để tạo khoá API, sau đó ghi lại khoá để sử dụng sau này trong lớp học lập trình này.

4. Thêm một trình đơn gồm các sản phẩm của Google

Mục tiêu của bạn là tạo ra những bài thơ hai câu cho các sản phẩm của Google. Trong thời gian chạy, người dùng ứng dụng có thể chọn một sản phẩm trong danh sách tên sản phẩm được điền sẵn một cách linh hoạt.

Để thêm danh sách sản phẩm của Google vào ứng dụng, hãy làm theo các bước sau:

  1. Trong VS Code, hãy chuyển đến tệp step1/lib/data/repositories/product_repository_impl.dart.
  2. Trong phần nội dung của hàm getAllProducts(), hãy thêm biến sau đây để lưu trữ một mảng tên sản phẩm của Google:

product_repository_impl .dart

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

5. Gửi yêu cầu đến PaLM API và giải mã phản hồi

Tên sản phẩm do người dùng chọn được kết hợp với mẫu câu lệnh sau:

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

Để gửi yêu cầu này đến điểm cuối PaLM API nhằm tạo một bài thơ hai câu, hãy làm theo các bước sau:

  1. Trong VS Code, hãy chuyển đến tệp step2/lib/data/repositories/poem_repository_impl.dart.
  2. Trong phần thân hàm getPoems(), hãy thêm mã sau:

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

Thay thế chuỗi YOUR_API_KEY bằng khoá API của bạn từ trước.

Sau khi nhận và giải mã thành công phản hồi, tiện ích văn bản trong giao diện người dùng sẽ hiển thị các bài thơ hai câu được tạo.

6. Chạy ứng dụng trên các nền tảng di động

  1. Trong VS Code, hãy đặt thiết bị mục tiêu thành thiết bị Android hoặc iOS.
  2. Nhấp vào a19a0c68bc4046e6.png Start debugging (Bắt đầu gỡ lỗi), rồi đợi ứng dụng tải.
  3. Chọn một sản phẩm trong trình đơn thả xuống, rồi chọn Tạo bài thơ hai câu! Ứng dụng này hiển thị một bài thơ haiku về sản phẩm đã chọn.

Ứng dụng đã hoàn thiện trên iOS Ứng dụng hoàn chỉnh trên Android

7. Chạy ứng dụng trên các nền tảng máy tính

Ngoài Android và iOS, Flutter còn hỗ trợ các nền tảng máy tính, bao gồm Linux, macOS và Windows.

Chạy ứng dụng trên Linux

  1. Trong VS Code, hãy đặt thiết bị mục tiêu thành Linux (linux-x64).
  2. Nhấp vào a19a0c68bc4046e6.png Start debugging (Bắt đầu gỡ lỗi), rồi đợi ứng dụng tải.
  3. Chọn một sản phẩm trong trình đơn thả xuống, rồi chọn Tạo bài thơ hai câu!

Ứng dụng hoàn chỉnh trên Linux

Chạy ứng dụng trên macOS

Đối với macOS, bạn cần thiết lập các quyền thích hợp vì ứng dụng sẽ gửi yêu cầu HTTP đến phần phụ trợ. Để biết thêm thông tin, hãy xem phần Quyền và hộp cát ứng dụng.

Để chạy ứng dụng trên macOS, hãy làm theo các bước sau:

  1. Trong các tệp step3/macos/Runner/DebugProfile.entitlementsstep3/macos/Runner/Release.entitlements, hãy thêm đoạn mã sau:

DebugProfile.entitlements | Release.entitlements

<key>com.apple.security.network.client</key>
<true/>
  1. Trong VS Code, hãy đặt thiết bị mục tiêu thành macOS (darwin) .
  2. Nhấp vào a19a0c68bc4046e6.png Start debugging (Bắt đầu gỡ lỗi), rồi đợi ứng dụng tải.
  3. Chọn một sản phẩm trong trình đơn thả xuống, rồi chọn Tạo bài thơ hai câu!

Ứng dụng hoàn chỉnh trên macOS

Chạy ứng dụng trên Windows

  1. Trong VS Code, hãy đặt thiết bị mục tiêu thành Windows (windows-x64).
  2. Nhấp vào a19a0c68bc4046e6.png Start debugging (Bắt đầu gỡ lỗi) rồi đợi ứng dụng tải.
  3. Chọn một sản phẩm trong trình đơn thả xuống, rồi chọn Tạo bài thơ hai câu!

Ứng dụng đã hoàn thiện trên Windows

8. Chạy ứng dụng trên nền tảng web

Bạn cũng có thể thêm tính năng hỗ trợ web vào ứng dụng Flutter. Theo mặc định, nền tảng web sẽ tự động được bật cho các ứng dụng Flutter, vì vậy, bạn chỉ cần chạy ứng dụng.

Để chạy ứng dụng trên nền tảng web, hãy làm theo các bước sau:

  1. Trong VS Code, hãy đặt thiết bị mục tiêu thành Chrome (web-javascript).
  2. Nhấp vào a19a0c68bc4046e6.png Start debugging (Bắt đầu gỡ lỗi), rồi đợi ứng dụng tải trong Google Chrome.
  3. Chọn một sản phẩm trong trình đơn thả xuống, rồi chọn Tạo bài thơ hai câu!

Ứng dụng đã hoàn thiện trên web

9. Xin chúc mừng

Bạn đã tạo một ứng dụng full-stack tạo ra những bài thơ haiku về các sản phẩm của Google! Mặc dù ứng dụng này chỉ tạo thơ hai câu cho một số sản phẩm của Google, nhưng bạn có thể dễ dàng thay đổi câu lệnh và tạo văn bản mà bạn muốn. Giờ đây, bạn đã biết cách sử dụng PaLM API, bạn có thể tạo các ứng dụng tuyệt vời bằng sức mạnh đáng kinh ngạc của LLM!

Tìm hiểu thêm