สร้างไฮไลต์เกี่ยวกับผลิตภัณฑ์ Google ด้วย PaLM API และ Flutter

1. ก่อนเริ่มต้น

หนึ่งในความก้าวหน้าด้านแมชชีนเลิร์นนิง (ML) ที่น่าตื่นเต้นที่สุดคือ Generative AI ซึ่งสามารถสร้างรูปภาพ ข้อความ เสียง และแม้แต่วิดีโอที่น่าทึ่งโดยอิงจากข้อความหรือพรอมต์ง่ายๆ จากผู้ใช้ โดยเฉพาะอย่างยิ่งเมื่อเปิดตัว PaLM API Google ช่วยให้นักพัฒนาแอปสร้างหมวดหมู่แอปที่มีประสบการณ์ของผู้ใช้ที่ยอดเยี่ยมซึ่งได้รับการปรับปรุงใหม่ด้วยเทคโนโลยี PaLM

ในโค้ดแล็บนี้ คุณจะได้สร้างแอปที่ใช้ PaLM API เพื่อสร้างไฮกุโดยอิงตามชื่อผลิตภัณฑ์ของ Google นอกจากนี้ คุณยังใช้ Flutter เพื่อสร้างแอปข้ามแพลตฟอร์มที่แสดงไฮกุได้ด้วย

ข้อกำหนดเบื้องต้น

• ความรู้พื้นฐานเกี่ยวกับโมเดลภาษาขนาดใหญ่ (LLM) เช่น การแจ้ง
• ความรู้พื้นฐานเกี่ยวกับการพัฒนา Flutter ด้วย Dart

สิ่งที่คุณจะได้เรียนรู้

• วิธีใช้ PaLM API จาก Google
• วิธีสร้างแอป Flutter แบบข้ามแพลตฟอร์มเพื่อแสดงผลลัพธ์

สิ่งที่คุณต้องมี

• Flutter SDK
• โปรแกรมแก้ไขข้อความ เช่น Visual Studio Code (VS Code)
• การตั้งค่า VS Code สำหรับ Flutter และ Dart
• การตั้งค่า Android หรือ iOS สำหรับ Flutter (รวมถึงโปรแกรมจำลองและเครื่องจำลอง)
• การตั้งค่าเดสก์ท็อปสำหรับ Flutter สำหรับ Windows, Linux หรือ macOS
• การตั้งค่า Web สำหรับ Flutter
• คีย์ API สำหรับ PaLM API

2. ตั้งค่า

ดาวน์โหลดโค้ดเริ่มต้น

1. ไปที่ที่เก็บ GitHub นี้
2. คลิกโค้ด > ดาวน์โหลด ZIP เพื่อดาวน์โหลดโค้ดทั้งหมดสำหรับ Codelab นี้
3. แตกไฟล์ ZIP ที่ดาวน์โหลดเพื่อคลายแพ็กเกจcodelabs-mainโฟลเดอร์รูท คุณต้องใช้เฉพาะไดเรกทอรีย่อย haiku-generator ซึ่งมีโฟลเดอร์ต่อไปนี้

• โฟลเดอร์ step0 ถึง step3 ซึ่งมีโค้ดเริ่มต้นที่คุณจะใช้ต่อยอดสำหรับแต่ละขั้นตอนใน Codelab นี้
• โฟลเดอร์ finished ซึ่งมีโค้ดที่เสร็จสมบูรณ์สำหรับแอปตัวอย่างที่เสร็จแล้ว

ดาวน์โหลดทรัพยากร Dependency ของโปรเจ็กต์

1. ใน VS Code ให้คลิกไฟล์ > เปิดโฟลเดอร์ > codelabs-main > haiku_generator > step0 > lib > main.dart
2. หากเห็นกล่องโต้ตอบ VS Code ที่แจ้งให้คุณดาวน์โหลดแพ็กเกจที่จำเป็นสำหรับแอปเริ่มต้น ให้คลิกรับแพ็กเกจ

3. หากไม่เห็นกล่องโต้ตอบ VS Code ที่แจ้งให้ดาวน์โหลดแพ็กเกจที่จำเป็นสำหรับแอปเริ่มต้น ให้เปิดเทอร์มินัล แล้วไปที่โฟลเดอร์ step0 และเรียกใช้คำสั่ง flutter pub get

เรียกใช้แอปเริ่มต้น

1. ใน VS Code ตรวจสอบว่าได้ตั้งค่า Android Emulator หรือ iOS Simulator อย่างถูกต้องและปรากฏในแถบสถานะ

ตัวอย่างเช่น สิ่งที่คุณเห็นเมื่อใช้ Pixel 5 กับ Android Emulator มีดังนี้

ต่อไปนี้คือสิ่งที่คุณจะเห็นเมื่อใช้ iPhone 13 กับ iOS Simulator

2. คลิก เริ่มแก้ไขข้อบกพร่อง แอปจะเปิดตัวในโปรแกรมจำลอง Android หรือโปรแกรมจำลอง iOS

สำรวจแอปเริ่มต้น

ในแอปเริ่มต้น ให้สังเกตสิ่งต่อไปนี้

• UI นั้นใช้งานง่าย
• มีเมนูแบบเลื่อนลงที่ให้ผู้ใช้เลือกผลิตภัณฑ์ Google ที่เฉพาะเจาะจง
• หลังจากที่ผู้ใช้เลือกปุ่มสร้างไฮกุแล้ว แอป Flutter จะส่งพรอมต์ในตัวไปยังปลายทาง PaLM API ซึ่งจะสร้างไฮกุ
• แอปจะแสดงไฮกุที่สร้างขึ้นในวิดเจ็ตข้อความหลังจากได้รับคำตอบ แต่หากเลือกสร้างไฮกุ จะไม่มีอะไรเกิดขึ้นเนื่องจากแอปยังสื่อสารกับ PaLM API ไม่ได้

3. ตั้งค่าการเข้าถึง PaLM API

คุณต้องมีคีย์ API เพื่อใช้ PaLM API ในขณะที่เผยแพร่โค้ดแล็บนี้ PaLM API ยังคงอยู่ในเวอร์ชันพรีวิวแบบส่วนตัว

• หากต้องการตั้งค่าสิทธิ์เข้าถึง PaLM API ให้ทำตามเอกสารประกอบเพื่อสร้างคีย์ API จากนั้นจดบันทึกคีย์เพื่อใช้ในภายหลังใน Codelab นี้

4. เพิ่มเมนูผลิตภัณฑ์ของ Google

เป้าหมายของคุณคือการสร้างไฮกุสำหรับผลิตภัณฑ์ของ Google ในขณะรันไทม์ ผู้ใช้แอปจะเลือกผลิตภัณฑ์จากรายการชื่อผลิตภัณฑ์ที่ป้อนไว้ล่วงหน้าแบบไดนามิกได้

หากต้องการเพิ่มรายการผลิตภัณฑ์ของ Google ลงในแอป ให้ทำตามขั้นตอนต่อไปนี้

1. ใน VS Code ให้ไปที่ไฟล์ step1/lib/data/repositories/product_repository_impl.dart
2. ในส่วนเนื้อหาของฟังก์ชัน getAllProducts() ให้เพิ่มตัวแปรต่อไปนี้ซึ่งจัดเก็บอาร์เรย์ของชื่อผลิตภัณฑ์ Google

product_repository_impl .dart

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

5. ส่งคำขอไปยัง PaLM API และถอดรหัสการตอบกลับ

ระบบจะรวมชื่อผลิตภัณฑ์ที่ผู้ใช้เลือกกับเทมเพลตพรอมต์ต่อไปนี้

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

หากต้องการส่งคำขอนี้ไปยังปลายทาง PaLM API เพื่อสร้างไฮกุ ให้ทำตามขั้นตอนต่อไปนี้

1. ใน VS Code ให้ไปที่ไฟล์ step2/lib/data/repositories/poem_repository_impl.dart
2. เพิ่มโค้ดต่อไปนี้ในเนื้อหาของฟังก์ชัน getPoems()

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

แทนที่สตริง YOUR_API_KEY ด้วยคีย์ API จากก่อนหน้า

หลังจากได้รับคำตอบและถอดรหัสสำเร็จแล้ว วิดเจ็ตข้อความใน UI จะแสดงไฮกุที่สร้างขึ้น

หมายเหตุ: ฟิลด์ examples ในเพย์โหลดใช้เป็นข้อมูลอ้างอิงและบอก API วิธีสร้างข้อความที่คล้ายกัน ซึ่งมักเรียกว่าการเรียนรู้ในบริบท คุณระบุตัวอย่างได้หลายรายการ

Codelab นี้ไม่ได้ลงรายละเอียดเกี่ยวกับวิธีปรับแต่งพรอมต์หรือคิดไอเดียพรอมต์ แต่มีสาขาวิศวกรรมพรอมต์ทั้งหมดที่ศึกษาว่าควรเขียนพรอมต์สำหรับ LLM อย่างไรให้ดีที่สุด ดูข้อมูลเพิ่มเติมได้โดยลองใช้พรอมต์อื่นๆ และปรับ UI ตามนั้น รวมถึงดูคู่มือการใช้พรอมต์สำหรับโดเมนที่เพิ่งเกิดขึ้นนี้

6. เรียกใช้แอปบนแพลตฟอร์มมือถือ

1. ใน VS Code ให้ตั้งค่าอุปกรณ์เป้าหมายเป็นอุปกรณ์ Android หรือ iOS
2. คลิก เริ่มการแก้ไขข้อบกพร่อง แล้วรอให้แอปโหลด
3. เลือกผลิตภัณฑ์จากเมนูแบบเลื่อนลง แล้วเลือกสร้างไฮกุ แอปจะแสดงไฮกุเกี่ยวกับผลิตภัณฑ์ที่เลือก

7. เรียกใช้แอปบนแพลตฟอร์มเดสก์ท็อป

นอกจาก Android และ iOS แล้ว Flutter ยังรองรับแพลตฟอร์มเดสก์ท็อปด้วย ซึ่งรวมถึง Linux, macOS และ Windows

เรียกใช้แอปบน Linux

1. ใน VS Code ให้ตั้งค่าอุปกรณ์เป้าหมายเป็น Linux (linux-x64)
2. คลิก เริ่มการแก้ไขข้อบกพร่อง แล้วรอให้แอปโหลด
3. เลือกผลิตภัณฑ์จากเมนูแบบเลื่อนลง แล้วเลือกสร้างไฮกุ

เรียกใช้แอปใน macOS

สำหรับ macOS คุณต้องตั้งค่าสิทธิ์ที่เหมาะสมเนื่องจากแอปจะส่งคำขอ HTTP ไปยังแบ็กเอนด์ ดูข้อมูลเพิ่มเติมได้ที่สิทธิ์และ App Sandbox

หากต้องการเรียกใช้แอปใน macOS ให้ทำตามขั้นตอนต่อไปนี้

1. เพิ่มโค้ดต่อไปนี้ในไฟล์ step3/macos/Runner/DebugProfile.entitlements และ step3/macos/Runner/Release.entitlements

DebugProfile.entitlements | Release.entitlements

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

2. ใน VS Code ให้ตั้งค่าอุปกรณ์เป้าหมายเป็น macOS (darwin)
3. คลิก เริ่มการแก้ไขข้อบกพร่อง แล้วรอให้แอปโหลด
4. เลือกผลิตภัณฑ์จากเมนูแบบเลื่อนลง แล้วเลือกสร้างไฮกุ

เรียกใช้แอปใน Windows

1. ใน VS Code ให้ตั้งค่าอุปกรณ์เป้าหมายเป็น Windows (windows-x64)
2. คลิก เริ่มการแก้ไขข้อบกพร่อง แล้วรอให้แอปโหลด
3. เลือกผลิตภัณฑ์จากเมนูแบบเลื่อนลง แล้วเลือกสร้างไฮกุ

8. เรียกใช้แอปบนแพลตฟอร์มเว็บ

นอกจากนี้ คุณยังเพิ่มการรองรับเว็บลงในแอป Flutter ได้ด้วย โดยค่าเริ่มต้น ระบบจะเปิดใช้แพลตฟอร์มเว็บสำหรับแอป Flutter โดยอัตโนมัติ สิ่งที่คุณต้องทำจึงมีเพียงเปิดใช้

หากต้องการเรียกใช้แอปในแพลตฟอร์มเว็บ ให้ทำตามขั้นตอนต่อไปนี้

1. ใน VS Code ให้ตั้งค่าอุปกรณ์เป้าหมายเป็น Chrome (web-javascript)
2. คลิก เริ่มการแก้ไขข้อบกพร่อง แล้วรอให้แอปโหลดใน Google Chrome
3. เลือกผลิตภัณฑ์จากเมนูแบบเลื่อนลง แล้วเลือกสร้างไฮกุ

9. ขอแสดงความยินดี

คุณสร้างแอปแบบฟูลสแต็กที่สร้างไฮกุเกี่ยวกับผลิตภัณฑ์ของ Google ได้ แม้ว่าแอปจะสร้างไฮกุสำหรับผลิตภัณฑ์บางอย่างของ Google เท่านั้น แต่คุณก็เปลี่ยนพรอมต์และสร้างข้อความที่ต้องการได้อย่างง่ายดาย ตอนนี้คุณทราบวิธีใช้ PaLM API แล้ว คุณจึงสร้างแอปที่น่าทึ่งด้วยพลังอันน่าทึ่งของ LLM ได้

ดูข้อมูลเพิ่มเติม

• PaLM API และ MakerSuite: วิธีที่เข้าถึงได้ง่ายในการเริ่มสร้างต้นแบบและสร้างแอป Generative AI
• Generative AI ของ Google
• Flutter