דף זה תורגם על ידי Cloud Translation API.

איך אפשר להשתמש ב-Gemini כדי לבחון ולשפר אפליקציה קיימת

‫1. סקירה

ה-Codelab הזה ידגים איך להשתמש ב-Gemini כדי לפתח אפליקציית לקוח על גבי קצה עורפי קיים של API.

מה תלמדו

שיעור ה-Lab הזה נועד להדגים שימוש ב-Gemini באפליקציה קיימת. בשיעור Lab זה תלמדו איך:

פורסים את פתרון התחלה מהירה לעיבוד תמונות בעזרת AI/ML
שימוש ב-Gemini כדי לחקור את האפליקציה של ה-API
איך משתמשים ב-Gemini כדי להפוך לקוח לאפליקציית API

הגדרה – יצירת פרויקט חדש

בהתאם למדיניות הארגון, ייתכן שלא תהיה לכם אפשרות לפרוס את הפתרון הזה בצורה נכונה.

המלצה: השתמשו בחשבון שיש לכם בו הרשאות מלאות (למשל חשבון לשימוש אישי) במקום חשבון של חברה או בית ספר

הערה: אם יצרתם לאחרונה פרויקט שבו יש לכם הרשאות מלאות וכבר הפעלתם את Gemini API באותו פרויקט, אתם יכולים להמשיך להשתמש בפרויקט ולדלג על השלב הזה. לדוגמה, אם השלמתם לאחרונה עוד Codelab של Gemini, אפשר לדלג על השלב הזה.

נכנסים אל מסוף Google Cloud
לוחצים על התפריט הנפתח של הפרויקט הנוכחי.
לוחצים על פרויקט חדש.
נותנים שם לפרויקט ולוחצים על יצירה
- המלצה: צריך לתת לפרויקט שם ייחודי כדי שהערכים Project name ו-Project ID יהיו זהים ל-

‫2. איך פורסים את הפתרון להתחלה מהירה

פתרונות שלבים מתחילים הם תבניות מוכנות מראש של פתרונות מ-Google Cloud. בשיעור ה-Lab הזה נעשה שימוש בפתרון להגדלת ההתחלה כדי להדגים איך Gemini יכול לעזור לשפר אפליקציה קיימת.

לדף הפרטים של פתרון התחלת השימוש ב-AI/ML לעיבוד תמונות
- לוחצים על תפריט ההמבורגרים
- בתפריט המשנה מוצרים ופתרונות, לוחצים על Jump Start Solutions
- לוחצים על עיבוד תמונות AI/ML ב-Cloud Functions
לוחצים על DEPLOY
- אם בפרויקט שלכם לא מופעל חיוב, צריך להפעיל את החיוב.
- מאשרים את שם הפרויקט ולוחצים על המשך.
- בוחרים את us-central1 (Iowa) בתור האזור.
- אם מופיעה בקשה לקלט אחר, מאשרים את אפשרויות ברירת המחדל.
- לוחצים על DEPLOY.
- התהליך עשוי להימשך עד 15 דקות.
- אתם לא צריכים לבצע שינויים, אבל אתם מוזמנים לבדוק את פריסת הפתרון של התחלה מהירה.

פתרון בעיות

בעיה: האם מופיעה הודעת השגיאה Partial deployment.?
- פתרון: לצערנו, המשמעות היא שסביר להניח שתצטרכו למחוק את הפריסה ולהתחיל מחדש. אמור להופיע הלחצן מחיקת המשימות. לוחצים על הלחצן ופורסים מחדש את פתרון נקודות ההתחלה.

3. הפעלה של Gemini

מגדירים את הסביבה לעריכת קוד ומפעילים את Gemini

נכנסים ל-Cloud Shell Editor
- חוזרים אל מסוף Google Cloud
- מקלידים Cloud Shell Editor בסרגל החיפוש ולוחצים על Cloud Shell Editor בתפריט הנפתח.
- אם משתמשים בעורך הקודם, לוחצים על רוצה לנסות את העורך החדש?.
  - הערה: אם אתם לא רואים את הלחצן רוצה לנסות את כלי העריכה החדש?, כנראה שאתם כבר משתמשים בגרסה החדשה של ה-Editor. אפשר להשתמש בעורך מדור קודם, אבל התצוגות ייראו קצת שונות.
- לוחצים על הסמל 'פתיחה בחלון חדש'
אם מופיעה בקשה, מתחברים לחשבון או מאשרים אותו.
- בהתאם להגדרות, יכול להיות שתתבקשו לאשר את החשבון כמה פעמים במהלך שיעור ה-Lab הזה, כשתתבקשו לבחור 'אישור' בכל פעם.
לוחצים על הלחצן Cloud Code – כניסה בשורת הסטטוס התחתונה, כמו שמוצג. מאשרים את הפלאגין לפי ההוראות.
אם מוצגת בקשה, לוחצים על Select a Google Cloud project (בחירת פרויקט ב-Google Cloud) ובוחרים את הפרויקט שבו רוצים להשתמש .
הפעלה של Gemini
- לוחצים על Cloud Code
  - הערה: בהתאם לגודל המסך, התהליך עשוי להימשך שלב אחד או שניים.
- בקטע עזרה ומשוב לוחצים על שינוי הגדרות.
- סוג Gemini: Enable
- מסמנים את תיבת הסימון (אם היא עדיין לא מסומנת)
- צריך לטעון מחדש את סביבת הפיתוח המשולבת (IDE).
- כך Gemini ב-Cloud Code יופעל, ושורת הסטטוס של Gemini תופיע בסביבת הפיתוח המשולבת (IDE).
לוחצים על הלחצן Gemini בפינה השמאלית התחתונה כמו שמוצג ובוחרים את הפרויקט המתאים ב-Google Cloud.
- אם מופיעה הודעת השגיאה Gemini has not been enabled for your selected project. לוחצים על הפעלת Gemini API
צריך לוודא שבצד ימין מופיע פרויקט Google Cloud הנכון (שם הפרויקט שלך יופיע) וש-Gemini מופעל בצד שמאל, בשורת הסטטוס שמוצגת כאן:

‫4. הורדת הקוד של הפונקציה של Cloud Functions

כדאי להוריד את הקוד ולהשתמש ב-Gemini כדי לקבל מידע נוסף על פתרונות התחלתיים ועל הקוד שפרסתם.

אם עוברים לדף אחר, לוחצים על Cloud Code
לוחצים על Cloud Functions
- אם מופיע הלחצן Select a project, לוחצים עליו ובוחרים את הפרויקט שאיתו עובדים.
- לוחצים על הפונקציה annotate-http.
- לוחצים על הסמל הורדה לסביבת עבודה חדשה
משתמשים ב-annotate-http-1 בתור השם של סביבת העבודה (צריכים להיות ברירת המחדל) ולוחצים על OK (אישור)
פותחים את הקובץ main.py
- לוחצים על סמל Explorer .
- לוחצים על הקובץ main.py כדי לפתוח אותו
לוחצים על הסמל של Gemini Chat
- הערה: בהתאם לגודל המסך, התהליך עשוי להימשך שלב אחד או שניים.
אפשר לנסות לשאול את Gemini שאלה. כותבים הנחיה כמו:
- What is a Jump Start Solution in Google Cloud?
- Explain this code.

איפוס Gemini Chat

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

איפוס ההדגשה של האשפה בצ'אט ב-Duet

5. קריאה לנקודת הקצה (endpoint) הקיימת של Cloud Functions

בודקים את הקוד וקוראים לנקודת הקצה (endpoint) שפרסתם ב-Jump Start Solution.

מזינים את ההנחיה:
- חשוב צריך להחליף את my-project-with-duet שבהנחיה הבאה במזהה הפרויקט.
- The region is us-central1 and the project id is my-project-with-duet. Write a curl post for the /annotate-http/annotate Cloud Function endpoint that performs label detection on the default eiffel tower image.
- אמורה להתקבל תשובה שכוללת פקודת curl כמו זו:
```
curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
...
```
- אפשר להעתיק את פקודת ה-curl הזו לשימוש בשלב הבא
בדיקת הפקודה בטרמינל חדש
- לוחצים על תפריט ההמבורגרים
- לוחצים על Terminal.
- לוחצים על טרמינל חדש
- מדביקים בטרמינל את פקודת ה-Curl מהשלב הקודם ולוחצים על Enter כדי להריץ את הפקודה.
- אמורה להתקבל תשובה שמתחילה כך:
```
{
    "labelAnnotations": [
    {
    "mid": "/m/0csby",
    "description": "Cloud",
    "score": 0.97885925,
    "topicality": 0.97885925,
...
```
(אופציונלי) אפשר לעשות את זה עם תמונה אחרת מהאינטרנט הציבורי. כדי לעשות את זה, מבקשים מ-Duet משהו כמו:
- Do the same thing with the image https://storage.googleapis.com/cloud-samples-data/vision/eiffel_tower.jpg

פתרון בעיות

הערה לגבי אי-דטרמיניזם: Gemini ומוצרים אחרים שמבוססים על מודלים גדולים של שפה (LLM) הם לא חד-משמעיים: כלומר, אם מזינים את אותו קלט, יכול להיות שתתקבל פלט שונה. גם אם תבצעו את השלבים בצורה מושלמת, יכול להיות שלא תקבלו פקודות פועלות. השלבים האלה לפתרון בעיות אמורים לעזור לכם לפתור את הבעיות האלה.

פקודת ה-curl שנוצרה אמורה להיראות כך:

curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
    -H "Content-Type: application/json" \
    -d '{
  "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg",
  "features": "LABEL_DETECTION"
}' \
    "https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate"

Gemini משתמש ב-TEST_IMAGE בקובץ main.py, שהוא תמונה של מגדל אייפל.

אם פקודת curl לא פועלת, יש כמה דברים שכדאי לבדוק:

בעיה: האם נקודת הקצה של כתובת ה-URL כוללת את .a.run.app?
- פתרון: Duet עשוי לחשוב שאתם פורסים ל-Cloud Run. מחליפים את my-project-with-duet במזהה הפרויקט ב-https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate כדי לקבל את נקודת הקצה הנכונה ב-Cloud Functions ולהשתמש בה בפקודת ה-curl.
בעיה: האם נקודת הקצה של כתובת ה-URL כוללת את my-project-with-duet?
- הפתרון: מחליפים את הערך my-project-with-duet במזהה הפרויקט.
בעיה: האם בנקודת הקצה של כתובת ה-URL חסר us-central1?
- הפתרון: מוודאים שכתובת ה-URL מתחילה ב-us-central1, למשל: https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate במזהה הפרויקט.
בעיה: בהתאם להנחיה, לפעמים נקודת הקצה שנוצרה נראית כמו cloudfunctions.net/annotate-http או cloudfunctions.net/annotate. האם בנקודת הקצה של כתובת ה-URL חסר /annotate-http/annotate בסוף?
- פתרון: מוודאים שנקודת הקצה של כתובת ה-URL מסתיימת בנתיב המלא של אפליקציית ה-API: cloudfunctions.net/annotate-http/annotate
בעיה: בקשת ה-cURL פועלת, אבל לא מקבלת הרבה מידע. האם הבקשה כוללת תכונות?
- פתרון: זו לא בעיה חמורה. אם תמשיכו בלי לשנות שום דבר, שאר שיעור ה-Lab ימשיך לפעול. כדי לקבל שוב מידע נוסף, אפשר לבקש מ-Duet להוסיף תכונות לבקשת ה-cURL.
בעיה: נראה שהתשובות שגויות או שאין בהן הקשר ספציפי לקוד. האם את/ה משתמש/ת ב-Gemini Chat בתוך Cloud Shell Editor?
- הפתרון: נסו לפתוח את הקובץ main.py ולהדגיש את הקוד שקשור להנחיה שלכם כשאתם משתמשים ב-Gemini Chat ב-Cloud Shell Editor. לעוזר הדיגיטלי של Gemini ב-Google Cloud יש הקשר שונה, שמוביל לתשובות שונות.
בעיה: התשובה של ההנחיה עדיין לא נכונה.
- פתרון: אפשר לנסות הנחיה אחרת כדי ש-Gemini יכוון עוד יותר למה שרוצים שהוא יפיק. חשוב להחליף את המזהה my-project-with-duet במזהה הפרויקט. לדוגמה:
```
Give me the curl command for:

1- Cloud Function running in us-central1 and project my-project-with-duet
2- HTTP POST to the following endpoint: /annotate-http/annotate endpoint
3- JSON in the body: { "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg", "features": "LABEL_DETECTION" }
```
בעיה: אחרי כל השלבים האלה לפתרון הבעיה, הכלי עדיין לא עובד.
- פתרון: בגלל האופי הלא-דטרמיני של מודלים מסוג LLM, יכול להיות ש-Duet יצר תשובה שלא תעבוד. אם זה קורה, מעתיקים את פקודת ה-curl לדוגמה שלמעלה ומנסים להריץ אותה בטרמינל. חשוב להחליף את המזהה my-project-with-duet במזהה הפרויקט.

6. יצירת לקוח של אפליקציית אינטרנט ל-API

משתמשים ב-Gemini כדי ליצור קובץ index.html שקורא לנקודת הקצה של הפונקציה של Cloud Functions ב-Jump Start Solution. לאחר מכן פרסו את הקובץ index.html באירוח ב-Firebase כדי לראות את הקוד בפעולה.

יצירת הקוד בצד הלקוח
- חוזרים לתיבת הצ'אט של Gemini, מזינים את ההנחיה:
  - Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use the full url beginning with https. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
- מעתיקים את הקובץ index.html שנוצר בתשובה.
  - הערה: תצטרכו את הקוד הזה מאוחר יותר. אם אתם חוששים שהוא יאבד, כדאי לשמור אותו במקום כלשהו.
- סגירה של main.py.
יצירת ספריית frontend חדשה
- אפשר לשאול את Gemini משהו כמו:
  - What are the console commands to create and navigate to a new frontend directory?
- אמורות להופיע תוצאות כמו mkdir frontend וגם cd frontend.
- משתמשים בטרמינל של Cloud Shell כדי לוודא שאתם עדיין נמצאים בספרייה annotate-http-1 ומריצים את הפקודות האלה:
  - cd ~/annotate-http-1
  - mkdir frontend
  - cd frontend
מוודאים שמחוברים לפרויקט הנכון בטרמינל של Cloud Shell
- אפשר לשאול את Gemini משהו כמו:
  - What is the gcloud command to set my project?
- אמורה להופיע תוצאה כמו gcloud config set project my-project-with-duet
  - מוודאים שמזהה הפרויקט נכון ומריצים את הפקודה בטרמינל של Cloud Shell.
הפעלת Firebase
- בכרטיסייה חדשה (משאירים את Cloud Shell Editor הנוכחי פתוח), נכנסים לכתובת https://console.firebase.google.com/
- לוחצים על Add Project (הוספת פרויקט).
- מקלידים את מזהה הפרויקט וממתינים שהוא יופיע בתפריט הנפתח.
- לוחצים על מזהה הפרויקט
- לוחצים על המשך.
- לוחצים על Confirm plan (אישור התוכנית).
- לוחצים על המשך.
- מבטלים את הבחירה באפשרות הפעלת Google Analytics בפרויקט הזה
  - מומלץ להשתמש ב-Google Analytics ב-Firebase, אבל הם לא יהיו בשימוש באפליקציה הזו.
- לוחצים על המשך.
- סגירת הכרטיסייה וחזרה ל-Cloud Shell Editor
- הערה: השלבים האלה נדרשים רק למשתמשים שלא השתמשו בעבר ב-Firebase, אבל כך כולם יכולים לעבור באותו נתיב. אם תעשו זאת שוב בעתיד, תוכלו לדלג על השלב הזה.
מתחברים ל-Firebase ב-Cloud Shell
- בטרמינל של Cloud Shell Editor, מריצים את הפקודה firebase login --no-localhost
- נכנסים לכתובת ה-URL שסופקה
  - לוחצים על כן, הרגע הרצתי את הפקודה הזו.
  - לוחצים על כן, זה מזהה הסשן שלי.
  - לוחצים על העתקה.
- חזרה לטרמינל של Cloud Shell Editor
- מדביקים את הערך שהועתק בטרמינל במקום שבו כתוב: Enter authorization code:
- לחיצה על Enter
פריסת אתר חדש באירוח Firebase
- מאתחלים פרויקט firebase חדש
  - אפשר לשאול את Gemini משהו כמו:
    - What are the commands to initialize and deploy a new firebase application?
  - אמורות להופיע תוצאות כמו firebase init ו-firebase deploy עם הוראות.
  - יש הרבה דרכים לעשות את זה ש-Gemini עשוי להמליץ עליהן, בהתאם להעדפות שלכם. לכן, ריכזנו כאן המלצה ספציפית בשבילכם:
    - firebase init
      - חץ למטה עד Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
        
        לוחצים על הסרגל Space
        
        לחיצה על Enter
      - חץ למטה עד Use an existing project
        
        לחיצה על Enter
      - אם מופיעה רשימה של פרויקטים, מקישים על החץ למטה עד שמגיעים לפרויקט שבו אתם משתמשים היום
        
        לחיצה על Enter
      - אם תופיע בקשה Please input the ID of the Google Cloud Project you would like to add Firebase:
        
        מקלידים את מזהה הפרויקט.
        
        לחיצה על Enter
      - לכל ההנחיות שנותרו, לוחצים על Enter
    - firebase deploy
לפרוס מחדש את האפליקציה באמצעות קריאה לנקודת הקצה של Cloud Functions API
- הפקודות הקודמות אמורות ליצור ספרייה public עם קובץ index.html בתוך הספרייה frontend שיצרתם קודם. יש לבצע את השינויים הבאים בקובץ ~/annotate-http-1/frontend/public/index.html.
- פותחים את הקובץ index.html.
  - לוחצים על סמל Explorer .
  - לוחצים על התיקייה frontend.
  - לוחצים על התיקייה public.
  - לוחצים על קובץ index.html .
- מרוקנים את קובץ index.html הקיים.
- מדביקים את הקוד שהעתקתם קודם בקובץ index.html
- מריצים את הפקודה firebase deploy כדי לפרוס את האפליקציה החדשה.
- אפשר להיכנס לכתובת ה-URL של אירוח firebase כדי לבדוק אם היא פועלת.
  - הערה: סביר להניח שיהיה צורך לבצע רענון קשיח של האתר כדי לראות את העדכונים.

פתרון בעיות

הקובץ index.html אמור להיראות כך:

<!DOCTYPE html>
<html>
<head>
<title>Vision API Annotate Image</title>
</head>
<body>
<h1>Vision API Annotate Image</h1>
<form id="annotate-form" action="https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate" method="POST">
    <label for="image-uri">Image URI:</label>
    <input type="text" id="image-uri" name="image_uri" value="gs://cloud-samples-data/vision/eiffel_tower.jpg">
    <br>
    <label for="features">Features:</label>
    <select id="features" name="features">
    <option value="LABEL_DETECTION">LABEL_DETECTION</option>
    <option value="TEXT_DETECTION">TEXT_DETECTION</option>
    <option value="IMAGE_PROPERTIES">IMAGE_PROPERTIES</option>
    </select>
    <br>
    <input type="submit" value="Annotate">
</form>

<div id="result"></div>

<script>
    const form = document.getElementById('annotate-form');

    form.addEventListener('submit', (event) => {
    event.preventDefault();

    const imageUri = document.getElementById('image-uri').value;
    const features = document.getElementById('features').value;

    const data = {
        image_uri: imageUri,
        features: features,
    };

    fetch('https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    })
        .then((response) => response.json())
        .then((result) => {
        const resultElement = document.getElementById('result');
        resultElement.innerHTML = JSON.stringify(result, null, 2);
        });
    });
</script>
</body>
</html>

אם האתר לא פועל, יש כמה דברים שכדאי לבדוק:

בעיה: 404 (לא נמצא) האם כתובת ה-URL שבה נעשה שימוש בשיטה fetch כוללת את my-project-with-duet?
- הפתרון: מחליפים את הערך my-project-with-duet במזהה הפרויקט.
בעיה: 404 (לא נמצא) האם בכתובת ה-URL שנעשה בה שימוש בשיטה fetch חסרה כתובת ה-URL המלאה?
- פתרון: מקפידים לכלול את כתובת ה-URL המלאה בשיטה fetch. הוא אמור להיראות בערך כמו https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate
בעיה: התשובה של ההנחיה עדיין לא נכונה.
- פתרון: אפשר לנסות הנחיה אחרת כדי ש-Gemini יכוון עוד יותר למה שרוצים שהוא יפיק. חשוב להחליף את המזהה my-project-with-duet במזהה הפרויקט. לדוגמה:
  - Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
הבעיה: האם האתר שלכם נפרס אבל לא פועל?
- פתרון: בגלל האופי הלא-דטרמיני של מודלים מסוג LLM, יכול להיות ש-Duet יצר תשובה שלא תעבוד. אם זה קורה, מעתיקים את הדוגמה index.html שלמעלה ומנסים לפרוס אותה מחדש עם firebase deploy. חשוב להחליף את המזהה my-project-with-duet במזהה הפרויקט.

‫7. (אופציונלי) פתיחת חקירה

משתמשים ב-Gemini ובעוזר הדיגיטלי בכלי העריכה כדי להוסיף סגנונות CSS לאפליקציה ולפרוס את האפליקציה שוב בסיום. רוצה לקבל השראה? הנה הנחיה לדוגמה שאפשר לנסות:
- Make this index.html file use material design.
דברים אחרים שאפשר לנסות:
- האתר שנוצר צריך לפעול עם כל תמונה ציבורית של http. אפשר לעבוד עם Duet כדי להציג את התמונה בדף.

‫8. (אופציונלי) מוחקים את הפרויקט.

אם ברצונך להימנע מחיוב על המשאבים שיצרת היום, אפשר לשאול את Duet איך לעשות את זה.

מזינים את ההנחיה:
- How can I delete my project?
- אמורה להופיע תוצאה כמו gcloud projects delete my-project-with-duet.
- חשוב צריך להחליף את my-project-with-duet בפקודה הקודמת במזהה הפרויקט.
מריצים את הפקודה gcloud projects delete כדי להסיר את כל המשאבים שיצרתם היום.