יצירת Haikus לגבי מוצרי Google באמצעות PaLM API ו-Flutter

1. לפני שמתחילים

אחד מהפיתוחים המלהיבים ביותר בתחום למידת המכונה (ML) הוא AI גנרטיבי, שיכול ליצור תמונות, טקסט, אודיו ואפילו סרטונים מדהימים על סמך טקסט פשוט – או הנחיות – מהמשתמשים. בפרט, עם ההשקה של PaLM API,‏ Google מאפשרת למפתחים ליצור קטגוריות של אפליקציות עם חוויות משתמש מעולות שנוצרו מחדש באמצעות טכנולוגיית PaLM.

ב-codelab הזה, תבנו אפליקציה שמשתמשת ב-PaLM API כדי ליצור שירי הייקו על סמך שמות של מוצרי Google. משתמשים ב-Flutter גם כדי ליצור אפליקציה בפלטפורמות שונות שמציגה את שירי ההייקו.

דרישות מוקדמות

  • ידע בסיסי במודלים גדולים של שפה (LLM), כמו יצירת הנחיות
  • ידע בסיסי בפיתוח Flutter עם Dart

מה תלמדו

  • איך משתמשים ב-PaLM API מבית Google.
  • איך ליצור אפליקציית Flutter בפלטפורמות שונות כדי להציג את התוצאות.

הדרישות

2. להגדרה

הורדת הקוד לתחילת הדרך

  1. עוברים אל מאגר ה-GitHub הזה.
  2. לוחצים על Code > Download zip (קוד > הורדת קובץ zip) כדי להוריד את כל הקוד של ה-Codelab הזה.
  3. מבטלים את הדחיסה של קובץ ה-ZIP שהורד כדי לחלץ תיקיית בסיס מסוג codelabs-main. צריך רק את ספריית המשנה haiku-generator, שמכילה את התיקיות הבאות:
  • התיקיות step0 עד step3, שמכילות את קוד לתחילת הדרך שעליו תבנו בכל שלב ב-Codelab הזה.
  • התיקייה finished, שמכילה את הקוד המלא של האפליקציה לדוגמה.

הורדת התלות של הפרויקט

  1. ב-VS Code, לוחצים על File (קובץ) > Open folder (פתיחת תיקייה) > codelabs-main > haiku_generator > step0 > lib > main.dart.
  2. אם מופיעה תיבת דו-שיח ב-VS Code שמבקשת להוריד את החבילות הנדרשות לאפליקציה לתחילת הדרך, לוחצים על Get packages (קבלת חבילות).

תיבת הדו-שיח ב-VS Code שמבקשת להוריד את החבילות הנדרשות לאפליקציה לתחילת הדרך.

  1. אם לא מופיע ב-VS Code דו-שיח שמבקש להוריד את החבילות הנדרשות לאפליקציה לתחילת הדרך, פותחים את הטרמינל, עוברים לתיקייה step0 ומריצים את הפקודה flutter pub get.

הפעלת האפליקציה לתחילת הדרך

  1. ב-VS Code, מוודאים שאמולטור Android או סימולטור iOS מוגדרים כראוי ומופיעים בשורת הסטטוס.

לדוגמה, כך נראה השימוש ב-Pixel 5 עם אמולטור Android:

שורת הסטטוס עם Pixel 5 שנבחר כמכשיר

כך נראה השימוש ב-iPhone 13 עם סימולטור iOS:

סרגל הסטטוס עם iPhone 13 שנבחר כמכשיר

  1. לוחצים על a19a0c68bc4046e6.png התחלת ניפוי באגים. האפליקציה תופעל באמולטור Android או בסימולטור iOS.

סקירת אפליקציה לתחילת הדרך

באפליקציה לתחילת הדרך, שימו לב לנקודות הבאות:

  • ממשק המשתמש די פשוט.
  • בתפריט הנפתח, המשתמשים יכולים לבחור מוצר ספציפי של Google.
  • אחרי שהמשתמשים לוחצים על הלחצן Generate haiku! (יצירת שיר הייקו!), אפליקציית Flutter שולחת את ההנחיה המובנית לנקודת קצה ל-API של PaLM, שמייצרת שירי הייקו.
  • אחרי שהאפליקציה מקבלת תשובה, היא מציגה את שירי ההייקו שנוצרו בווידג'ט הטקסט. אבל אם תבחרו באפשרות Generate haiku! (יצירת הייקו), לא יקרה כלום כי האפליקציה עדיין לא יכולה לתקשר עם PaLM API.

אפליקציית המתחילים ב-iOS אפליקציה לתחילת הדרך ב-Android

3. הגדרת גישה ל-PaLM API

כדי להשתמש ב-PaLM API, צריך מפתח API. בזמן הפרסום של ה-codelab הזה, 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}.

כדי לשלוח את הבקשה הזו לנקודת קצה ל-API של PaLM כדי ליצור הייקו, פועלים לפי השלבים הבאים:

  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 ששמרתם קודם.

אחרי שהתשובה מתקבלת ומפוענחת בהצלחה, ווידג'ט הטקסט בממשק המשתמש מציג את שירי ההייקו שנוצרו.

6. הפעלת האפליקציה בפלטפורמות לנייד

  1. ב-VS Code, מגדירים את מכשיר היעד למכשיר Android או iOS.
  2. לוחצים על a19a0c68bc4046e6.png התחלת ניפוי באגים וממתינים לטעינת האפליקציה.
  3. בוחרים מוצר מהתפריט הנפתח ואז באפשרות יצירת הייקו. האפליקציה מציגה הייקו על המוצר שנבחר.

האפליקציה המוגמרת ב-iOS האפליקציה המוגמרת ב-Android

7. הפעלת האפליקציה בפלטפורמות למחשב

בנוסף ל-Android ול-iOS,‏ Flutter תומכת גם בפלטפורמות למחשב, כולל Linux,‏ macOS ו-Windows.

הפעלת האפליקציה ב-Linux

  1. ב-VS Code, מגדירים את מכשיר היעד ל-Linux (linux-x64).
  2. לוחצים על a19a0c68bc4046e6.png התחלת ניפוי באגים וממתינים לטעינת האפליקציה.
  3. בוחרים מוצר מהתפריט הנפתח ולוחצים על יצירת הייקו!.

האפליקציה המוגמרת ב-Linux

הפעלת האפליקציה ב-macOS

ב-macOS, צריך להגדיר הרשאות מתאימות כי האפליקציה שולחת בקשות HTTP לבק-אנד. מידע נוסף זמין במאמר בנושא זכויות וארגז החול של האפליקציה.

כדי להריץ את האפליקציה ב-macOS:

  1. בקובץ step3/macos/Runner/DebugProfile.entitlements ובקובץ step3/macos/Runner/Release.entitlements, מוסיפים את הקוד הבא:

DebugProfile.entitlements | Release.entitlements

<key>com.apple.security.network.client</key>
<true/>
  1. ב-VS Code, מגדירים את מכשיר היעד ל-macOS (darwin) .
  2. לוחצים על a19a0c68bc4046e6.png התחלת ניפוי באגים וממתינים לטעינת האפליקציה.
  3. בוחרים מוצר מהתפריט הנפתח ולוחצים על יצירת הייקו!.

האפליקציה המוגמרת ב-macOS

הרצת האפליקציה ב-Windows

  1. ב-VS Code, מגדירים את מכשיר היעד ל-Windows (windows-x64).
  2. לוחצים על a19a0c68bc4046e6.png התחלת ניפוי באגים ומחכים שהאפליקציה תיטען.
  3. בוחרים מוצר מהתפריט הנפתח ולוחצים על יצירת הייקו!.

האפליקציה המוגמרת ב-Windows

8. הפעלת האפליקציה בפלטפורמת האינטרנט

אפשר גם להוסיף תמיכה באינטרנט לאפליקציית Flutter. כברירת מחדל, פלטפורמת האינטרנט מופעלת אוטומטית באפליקציות Flutter, כך שכל מה שצריך לעשות הוא להפעיל אותה.

כדי להפעיל את האפליקציה בפלטפורמת האינטרנט:

  1. ב-VS Code, מגדירים את מכשיר היעד ל-Chrome (web-javascript).
  2. לוחצים על a19a0c68bc4046e6.png התחלת ניפוי באגים, ומחכים שהאפליקציה תיטען ב-Google Chrome.
  3. בוחרים מוצר מהתפריט הנפתח ולוחצים על יצירת הייקו!.

האפליקציה המוגמרת באינטרנט

9. מזל טוב

יצרת אפליקציה מלאה שמייצרת שירי הייקו על מוצרי Google! האפליקציה אמנם יוצרת רק שירי הייקו למוצרי Google נבחרים, אבל אפשר לשנות בקלות את ההנחיה וליצור את הטקסט הרצוי. עכשיו, אחרי שלמדתם איך להשתמש ב-PaLM API, אתם יכולים ליצור אפליקציות מדהימות באמצעות היכולות המדהימות של מודלים גדולים של שפה (LLM).

מידע נוסף