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

1. סקירה כללית

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

מה תלמדו

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

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

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

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

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

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

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

2. פריסת הפתרון ההתחלתי

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

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

פתרון בעיות

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

3. הפעלת Gemini

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

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

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

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

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

איפוס של Gemini Chat

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

איפוס של המהלך הגדול באשפה של Duet Chat

5. הפעלת נקודת הקצה הקיימת של Cloud Functions

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

מזינים את ההנחיה:
- חשוב מחליפים את 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 (מסוף).
- לוחצים על New Terminal (טרמינל חדש).
- מדביקים את פקודת ה-curl מהשלב הקודם בטרמינל ומקישים על Enter כדי להריץ את הפקודה.
- אמורה להתקבל תגובה שמתחילה כך:
```
{
    "labelAnnotations": [
    {
    "mid": "/m/0csby",
    "description": "Cloud",
    "score": 0.97885925,
    "topicality": 0.97885925,
...
```
(אופציונלי) אפשר לעשות את זה עם תמונה אחרת מהאינטרנט הציבורי. לשם כך, מזינים הנחיה ל-Duet AI, למשל:
- 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 במזהה הפרויקט.
בעיה: האם חסר us-central1 בכתובת ה-URL של נקודת הקצה?
- פתרון: מוודאים שכתובת ה-URL מתחילה ב-us-central1, למשל: https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate עם מזהה הפרויקט.
בעיה: בהתאם להנחיה שבה משתמשים, לפעמים נקודת הקצה שנוצרת תיראה כמו cloudfunctions.net/annotate-http או cloudfunctions.net/annotate. האם חסר /annotate-http/annotate בסוף כתובת ה-URL של נקודת הקצה?
- פתרון: מוודאים שנקודת הקצה של כתובת ה-URL מסתיימת בנתיב המלא של אפליקציית ה-API cloudfunctions.net/annotate-http/annotate
בעיה: בקשת cURL פועלת, אבל לא מתקבל מידע רב. האם הבקשה כוללת תכונות?
- פתרון: זו לא בעיה רצינית. אם תמשיכו בלי לשנות שום דבר, שאר המעבדה עדיין תפעל. אם רוצים לקבל מידע נוסף, אפשר לבקש מ-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" }

בעיה: אחרי כל השלבים האלה לפתרון בעיות, עדיין לא ניתן להשתמש ב-Google Workspace.
- פתרון: בגלל האופי הלא דטרמיניסטי של מודלים מסוג LLM, יכול להיות ש-Duet יצר תשובה שלא תפעל. במקרה כזה, מעתיקים את פקודת ה-curl לדוגמה שלמעלה ומנסים להריץ אותה במסוף. חשוב להחליף את my-project-with-duet במזהה הפרויקט.

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

משתמשים ב-Gemini כדי ליצור קובץ index.html שקורא לנקודת הקצה של פונקציית Cloud Functions של פתרון Jump Start. לאחר מכן פורסים את הקובץ 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/
- לוחצים על הוספת פרויקט.
- מקלידים את מזהה הפרויקט ומחכים שהוא יופיע בתפריט הנפתח.
- לוחצים על מזהה הפרויקט.
- לוחצים על המשך.
- לוחצים על אישור התוכנית.
- לוחצים על המשך.
- מבטלים את הסימון של האפשרות הפעלת Google Analytics בפרויקט הזה
  - ב-Firebase מומלץ להשתמש ב-Google Analytics, אבל לא נעשה בהם שימוש באפליקציה הזו.
- לוחצים על המשך.
- סוגרים את הכרטיסייה הזו וחוזרים ל-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
פורסים מחדש את האפליקציה באמצעות קריאה לנקודת קצה ל-API של Cloud Functions:‏
- הפקודות הקודמות אמורות ליצור ספרייה בשם public עם קובץ בשם index.html בתוך הספרייה frontend שיצרתם קודם. בקובץ ~/annotate-http-1/frontend/public/index.html צריך לבצע את השינויים הבאים.
- פותחים את הקובץ index.html.
  - לוחצים על סמל הסייר .
  - לוחצים על התיקייה frontend.
  - לוחצים על התיקייה public.
  - לוחצים על קובץ index.html
- מרוקנים את הקובץ הקיים index.html.
- מדביקים את הקוד שהעתקתם קודם לקובץ index.html.
- מריצים את הפקודה firebase deploy כדי לפרוס את האפליקציה החדשה
- כדי לבדוק אם האתר פועל, עוברים לכתובת ה-URL של Firebase Hosting.
  - הערה: סביר להניח שתצטרכו לבצע רענון מלא של האתר כדי לראות את העדכונים.

פתרון בעיות

קובץ 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 כדי להסיר את כל המשאבים שיצרתם היום.