שימוש ב-Gemini Code Assist כדי לחקור ולשפר פתרון התחלה מבוסס-AI לסיכום AI

1. מבוא

ב-codelab הזה נבחן פתרון קיים של Jump Start, סיכום באמצעות AI, שמשתמש במודלים של Vertex AI כדי לסכם מסמכי PDF שהועלו ל-Google Cloud Storage.

לאחר מכן נשתמש ב-Gemini Code Assist כדי:

הסבר על קוד Python שמפעיל את פונקציית Cloud Functions שמבצעת את העבודה של חילוץ הטקסט ממסמך ה-PDF, סיכום שלו וכתיבת התוצאות ל-BigQuery.
במהלך התהליך, נשתמש ב-Gemini Code Assist כדי לכתוב פונקציונליות חדשה. אנחנו נפתח אפליקציית אינטרנט (אפליקציית Python Flask) ונריץ את האפליקציה באופן מקומי כדי לאמת את הקוד שלנו.
אפשר גם לבדוק את הפריסה של האפליקציה הזו ב-Cloud Run ולשפר את העיצוב (האסתטיקה) של אפליקציית האינטרנט באמצעות Material Design.

מה עושים...

תפרסו את פתרון ה-Jump Start של סיכום באמצעות AI ותפעילו את תהליך העבודה כדי להבין איך הוא פועל.
לאחר מכן תשתמשו ב-Cloud Shell IDE כדי להוריד את הקוד הקיים של פתרון ההתחלה המהירה, ותשתמשו ב-Gemini Code Assist כדי להבין את הקוד.
תשתמשו ב-Gemini Code Assist Cloud Shell IDE כדי ליצור קוד לפונקציונליות חדשה.

מה תלמדו...

איך פתרון התחלתי לסיכום באמצעות AI עובד.
איך משתמשים ב-Gemini Code Assist למשימות פיתוח שונות, כמו יצירת קוד, השלמת קוד וסיכום קוד.

מה צריך...

דפדפן האינטרנט Chrome
חשבון Gmail
פרויקט ב-Cloud עם חיוב מופעל
‫Gemini Code Assist מופעל בפרויקט שלכם ב-Cloud

שיעור ה-Lab הזה מיועד למפתחים בכל הרמות, כולל מתחילים. אף על פי שאפליקציית הדוגמה כתובה בשפת Python, לא צריך להכיר את התכנות ב-Python כדי להבין מה קורה. המיקוד שלנו יהיה בהיכרות עם היכולות של Gemini Code Assist למפתחים.

2. הגדרה

בקטע הזה מפורט כל מה שצריך לעשות כדי להתחיל את שיעור ה-Lab.

הפעלת Gemini for Cloud בפרויקט ב-Google Cloud

עכשיו נפעיל את Gemini for Cloud בפרויקט שלנו ב-Google Cloud. כך עושים את זה:

נכנסים לכתובת https://console.cloud.google.com ומוודאים שבחרתם את הפרויקט ב-Google Cloud שבו אתם מתכננים לעבוד במעבדה הזו. לוחצים על הסמל של Gemini בפינה השמאלית העליונה.

חלון הצ'אט של Gemini for Cloud ייפתח בצד שמאל של המסוף. לוחצים על הלחצן 'הפעלה' כמו שמוצג למטה. אם לא מופיע הלחצן הפעלה ומופיע במקומו ממשק של Chat, סביר להניח שכבר הפעלתם את Gemini for Cloud בפרויקט, ואתם יכולים לעבור ישירות לשלב הבא.

אחרי שמפעילים אותו, אפשר לשאול את Gemini for Cloud שאילתה או שתיים כדי לבדוק אותו. מוצגות כמה דוגמאות לשאילתות, אבל אפשר לנסות שאילתה כמו What is Cloud Run?

‫Gemini for Cloud ייתן תשובה לשאלה שלכם. כדי לסגור את חלון הצ'אט של Gemini for Cloud, לוחצים על הסמל בפינה השמאלית העליונה.

הפעלת Gemini Code Assist ב-Cloud Shell IDE

נשתמש ב-Cloud Shell IDE, סביבת פיתוח מנוהלת מלאה שמבוססת על Code OSS, בשאר שלבי ה-codelab. צריך להפעיל ולהגדיר את Code Assist בסביבת הפיתוח המשולבת (IDE) של Cloud Shell. השלבים מפורטים בהמשך:

עוברים אל ide.cloud.google.com. יכול להיות שיעבור זמן מה עד שסביבת הפיתוח המשולבת תופיע, אז כדאי לחכות בסבלנות.
לוחצים על הלחצן Cloud Code - Sign in (קוד בענן – כניסה) בשורת הסטטוס התחתונה, כמו שמוצג. נותנים הרשאה לפלאגין לפי ההוראות. אם בשורת המצב מופיע הכיתוב Cloud Code - no project, בוחרים באפשרות הזו ואז בוחרים את הפרויקט הספציפי ב-Google Cloud שרוצים לעבוד איתו.

לוחצים על הלחצן Gemini בפינה השמאלית התחתונה כמו שמוצג, ובוחרים בפעם האחרונה את פרויקט Google Cloud הנכון. אם תתבקשו להפעיל את Cloud AI Companion API, תצטרכו לעשות זאת כדי להמשיך.
אחרי שבוחרים את פרויקט Google Cloud, מוודאים שהוא מופיע בהודעת הסטטוס של Cloud Code בסרגל הסטטוס, וגם ש-Code Assist מופעל בצד ימין בסרגל הסטטוס, כמו שמוצג כאן:

‫Gemini Code Assist מוכן לשימוש!

אופציונלי: אם אתם לא רואים את Gemini בסרגל המצב בפינה השמאלית התחתונה, אתם צריכים להפעיל את Gemini ב-Cloud Code. לפני שמתחילים, חשוב לוודא ש-Gemini מופעל ב-IDE. לשם כך, עוברים אל Cloud Code Extension → Settings ומזינים את הטקסט Gemini כמו שמוצג בהמשך. מוודאים שהתיבה מסומנת. צריך לטעון מחדש את סביבת הפיתוח המשולבת (IDE). כך מפעילים את Gemini ב-Cloud Code, והסמל של Gemini יופיע בסרגל המצב בסביבת הפיתוח המשולבת.

3. פריסת פתרון התחלתי לסיכום באמצעות AI

מעבר אל פתרון סיכום מסמכים באמצעות AI גנרטיבי
לוחצים על Deploy (פריסה).

אם החיוב לא מופעל בפרויקט, צריך להפעיל אותו.
בוחרים באזור us-central1.
לוחצים על 'פריסה'.
התהליך יכול להימשך עד 15 דקות.
אין צורך לבצע שינויים, אבל אתם יכולים ללחוץ על הלחצן EXPLORE THIS SOLUTION בדף הפרטים של פריסת הפתרון כדי לבדוק את הפתרון של Jump Start Solution.

4. שיחה עם Gemini

נתחיל בלמידה איך לשוחח עם Gemini. ‫Gemini זמין כעוזר צ'אט בסביבת הפיתוח המשולבת (IDE) של Cloud Shell כחלק מהתוסף Cloud Code ב-VS Code. כדי לפתוח אותו, לוחצים על לחצן Gemini בסרגל הניווט הימני. חפשו את סמל Gemini בסרגל הניווט הימני ולחצו עליו.

הפעולה הזו תפתח את החלונית Chat: GeminiI ב-Cloud Shell IDE, ותוכלו לשוחח עם Gemini כדי לקבל עזרה בנושא Google Cloud.

נשתמש בחלונית הצ'אט של Gemini כדי להזין הנחיה ולראות את התשובה מ-Gemini. מזינים את ההנחיה הבאה:

What is Cloud Run?

‫Gemini צריך לענות עם פרטים על Cloud Run. הנחיות הן שאלות או הצהרות שמתארות את העזרה שאתם צריכים. ההנחיות יכולות לכלול הקשר מקוד קיים שמנותח על ידי Google Cloud כדי לספק תשובות מועילות או מלאות יותר. מידע נוסף על כתיבת הנחיות ליצירת תשובות טובות זמין במאמר כתיבת הנחיות טובות יותר ל-Gemini ב-Google Cloud.

כדי לשאול שאלות על Google Cloud, אתם יכולים לנסות את ההנחיות לדוגמה שבהמשך או כל הנחיה אחרת משלכם:

What is the difference between Cloud Run and Cloud Functions?
What services are available on Google Cloud to run containerized workloads?
What are the best practices to optimize costs while working with Google Cloud Storage?

שימו לב לסמל פח האשפה בחלק העליון – כך מאפסים את ההקשר של היסטוריית הצ'אט של Code Assist. חשוב גם לציין שההתכתבות בצ'אט הזו היא בהקשר של הקבצים שאתם עובדים עליהם בסביבת הפיתוח המשולבת.

5. הורדת פונקציית Cloud Functions של פתרון Jump Start ב-Cloud Code

אם אתם נמצאים ב-Cloud Shell Editor, פועלים לפי השלבים הבאים:

לוחצים על Cloud Code‏
הערה: יכול להיות שתצטרכו לבצע שלב אחד או שניים, בהתאם לגודל המסך.

או

לוחצים על Cloud Functions.
אם מתבקשים, מתחברים לחשבון או מאשרים אותו.
לוחצים על פונקציית ה-webhook.
לוחצים על סמל ההורדה לסביבת עבודה חדשה
משתמשים ב-webhook-1 כשם סביבת העבודה (צריך להיות ברירת המחדל) או בכל שם אחר ולוחצים על אישור.
הקוד ייפתח בסביבת הפיתוח המשולבת (IDE) של Cloud Shell.

6. בדיקת הפרויקט הקיים

פתרון ההתנעה הזה מוצג בהמשך:

בדיקת התהליך מהפונקציה Upload PDF (העלאת PDF) אל Cloud Storage. הפונקציה ב-Cloud Functions שתופעל אם קובץ ה-PDF יועלה מופיעה בקובץ main.py.

לוחצים על הקובץ. נקודת הכניסה לפונקציית הענן היא הפונקציה entrypoint, שמפעילה בסופו של דבר את הפונקציה cloud_event_entrypoint ששולפת את הטקסט מקובץ ה-PDF, ואז מפעילה את הפונקציה summarization_entrypoint, שמשתמשת במודלים של Vertex AI כדי לסכם את התוצאות ולכתוב אותן ב-GCS וב-BigQuery בהתאמה.

מדגישים את כל הקוד בקובץ main.py או קטע קוד ספציפי. לוחצים על Gemini Chat ומזינים את ההנחיה הבאה: Explain this.

אמור להיפתח חלון עם הסבר על הקוד.

7. ביצוע של ריצה לדוגמה

כפי שרואים בדיאגרמת הארכיטקטורה, אנחנו הולכים להעלות קובץ לקטגוריה <PROJECT_ID>_uploads כדי להפעיל את פונקציה של Cloud Functions.

מוודאים שיש לכם קובץ PDF לדוגמה שאתם יכולים להעלות ושאתם רוצים לקבל סיכום שלו.

נכנסים אל Google Cloud Storage במסוף Cloud.
עוברים אל מאגר <PROJECT_ID>_uploads. לוחצים על הקישור העלאת קבצים ומעלים קובץ PDF לדוגמה.

אם אין לכם קובץ PDF לדוגמה, אתם יכולים להשתמש באחת מהדוגמאות שיצרנו. מריצים את הפקודה הבאה מ-Cloud Shell:

gsutil cp \
    gs://arxiv-dataset/arxiv/cmp-lg/pdf/9410/9410009v1.pdf \
    gs://<PROJECT_ID>_uploads/

אחרי שהקובץ יעלה בהצלחה, הפונקציה webhook בענן תופעל ותסכם את הטקסט שנמצא במסמך. הפלט ייכתב למערך נתונים ב-BigQuery בשם summary_dataset ולטבלה summary_table.

מריצים שאילתה בטבלה כדי לראות את תוצאות הסיכום.

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

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

הדרישות לגבי חזית האתר פשוטות:

טופס HTML בסיסי שמאפשר לנו לבחור ולהעלות את הקובץ שצריך לסכם.
אם ההעלאה של הקובץ תצליח, הוא ייכתב לקטגוריה <PROJECT_ID>_uploads, כדי ששאר הפונקציות יפעלו כרגיל.

נשתמש ב-Python ובמסגרת Flask לאפליקציות אינטרנט כדי לבנות את הפתרון הזה בעזרת Duet AI.

בואו נתחיל. אנחנו נניח שסביבת העבודה שלכם עדיין פתוחה ב-IDE של Cloud Shell.

סוגרים את כל הקבצים ומזינים את ההנחיה הבאה בחלון של Gemini Chat:

Write a Python Flask application that has a couple of routes:
The root route / should serve the index.html page using the render_template framework. The /upload route should accept a file being uploaded and write that file to a Cloud Storage bucket.

באופן אידיאלי, הקוד שיווצר צריך להיות כזה:

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    filename = file.filename
    bucket = storage.Client().bucket('your-bucket-name')
    blob = bucket.blob(filename)
    blob.upload_from_string(
        file.read(),
        content_type=file.content_type
    )
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True)

שומרים את הקוד שלמעלה כ-app.py בבסיס של סביבת הפיתוח המשולבת (IDE).

אנחנו רוצים שהאפליקציה תפעל ביציאה 8080 ותשתמש בכתובת המארח 0.0.0.0 , אז נבקש מ-Gemini לשנות את ההצהרה app.run.

מזינים את ההנחיה הבאה:

Modify the app.py to run on port 8080 and host address 0.0.0.0

הקוד אמור להיראות כך:

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    filename = file.filename
    bucket = storage.Client().bucket('your-bucket-name')
    blob = bucket.blob(filename)
    blob.upload_from_string(
        file.read(),
        content_type=file.content_type
    )
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

בשלב הבא, אנחנו רוצים שגם הקובץ index.html ייווצר. מזינים את ההנחיה הבאה בחלון של Gemini Chat:

Provide the index.html file

הוא אמור לספק לכם קוד כמו זה שבהמשך עבור index.html.

<!DOCTYPE html>
<html>
<head>
  <title>File Upload</title>
</head>
<body>
  <h1>File Upload</h1>
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="Upload">
  </form>
</body>
</html>

אנחנו יכולים לבקש מ-Gemini להגיד לנו איפה לשמור את הקובץ index.html. מזינים את ההנחיה הבאה:

Since this is using the render_template framework, where should this file be saved?

התשובה שמתקבלת אמורה להיות דומה לתשובה הבאה:

יוצרים תיקייה בשם templates בתיקיית השורש ושומרים בה את הקובץ index.html.

אנחנו רוצים לטפל בחריגים בקובץ app.py למקרה שלא תהיה אפשרות לשמור את הקובץ בקטגוריה של Google Cloud Storage. משאירים את הקובץ app.py פתוח ונותנים את ההנחיה הבאה בחלון Gemini Chat.

modify the app.py to have exception handling in the upload() function. The success or failure should be returned to the index page.

עכשיו אמורות להתווסף כמה פעולות לטיפול בחריגים, כמו שמוצג בהמשך:

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    try:
        file = request.files['file']
        filename = file.filename
        bucket = storage.Client().bucket('your-bucket-name')
        blob = bucket.blob(filename)
        blob.upload_from_string(
            file.read(),
            content_type=file.content_type
        )
        return redirect(url_for('index'))
    except Exception as e:
        return render_template('index.html', error=str(e))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

אנחנו צריכים להציג את הודעת השגיאה בקובץ index.html, ולכן צריך לשנות גם אותו. אפשר לבקש מ-Gemini לעשות את זה באמצעות ההנחיה הבאה:

update the index.html to display the error message

אחרי העדכון, הקובץ index.html צריך להיראות כך:

<!DOCTYPE html>
<html>
<head>
  <title>File Upload</title>
</head>
<body>
  <h1>File Upload</h1>
  {% if error %}
    <p style="color: red;">{{ error }}</p>
  {% endif %}
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="Upload">
  </form>
</body>
</html>

חשוב לוודא שבכל אחד מהשלבים שלמעלה שומרים את השינויים בקובץ app.py ובקובץ index.html בהתאמה.

ב-app.py לא מופיע שם הבאקט הנכון, ולכן אפשר להזין את המידע הזה ל-Gemini ולבקש ממנו לבצע את השינויים. בנוסף, צריך לספק את מזהה הפרויקט של מופע storage.Client(). לכן, צריך להזין את ההנחיות הבאות (מחליפים את <PROJECT_ID> במזהה הפרויקט ב-Google Cloud) בחלון של Gemini Chat ולבצע את השינויים:

הנחיה 1

My bucket name is gemini-for-devs-demo_uploads, please change the code to use that.

הנחיה 2

My project id is gemini-for-devs-demo, please change the storage.Client() to use that.

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

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    try:
        file = request.files['file']
        filename = file.filename
        bucket = storage.Client(project='gcp-experiments-349209').bucket('gcp-experiments-349209_uploads')
        blob = bucket.blob(filename)
        blob.upload_from_string(
            file.read(),
            content_type=file.content_type
        )
        return redirect(url_for('index'))
    except Exception as e:
        return render_template('index.html', error=str(e))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

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

יוצרים סביבת Python עם יחסי התלות שמוגדרים בקובץ requirements.txt. עוברים אל לוח הפקודות ב-Cloud Shell IDE, כמו שמוצג בהמשך:

מקלידים Python: Create Environment ופועלים לפי השלבים ליצירת סביבה וירטואלית באמצעות (venv), ואז מפרש Python 3.x וקובץ requirements.txt. הפעולה הזו תיצור את הסביבה הנדרשת.

מפעילים את הטרמינל באופן הבא:

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

python app.py

אפליקציית Flask אמורה לפעול, ותוצג לכם הודעה כמו זו:

(.venv) romin@cloudshell:~/webhook-2 (gcp-experiments-349209)$ python app.py 
 * Serving Flask app 'app'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:8080
 * Running on http://10.88.0.3:8080
Press CTRL+C to quit
 * Restarting with watchdog (inotify)
 * Debugger is active!
 * Debugger PIN: 989-296-833

נכנסים לכתובת ה-URL http://127.0.0.1:8080 ודף index.html אמור להופיע.

מעלים קובץ מהמחשב המקומי ומוודאים שהעיבוד שלו הושלם בהצלחה.

כדי לבדוק את הסיכום, אפשר לעבור לטבלה ולמערך הנתונים ב-BigQuery שראינו קודם ב-Lab. אפשר גם לבדוק את קטגוריית Cloud Storage ‏ (<PROJECT_ID>_output).

10. (אופציונלי) פתיחת ניתוח – פריסה ב-Cloud Run

אפשר לפרוס את האפליקציה ב-Cloud Run.
מזינים את ההנחיה הבאה ל-Gemini Code Assist (יכול להיות שתצטרכו לנסות כמה וריאציות של ההנחיה שלמעלה):

I don't want to build a container image but deploy directly from source. What is the gcloud command for that?

11. (אופציונלי) פתיחת ניתוח – הוספת סגנונות CSS

אפשר להשתמש ב-Gemini Code Assist ובמסייע בתוך העורך כדי להוסיף סגנונות CSS לאפליקציה ולפרוס אותה מחדש כשמסיימים.
פותחים את הקובץ index.html ומזינים את ההנחיה הבאה ב-Gemini Chat: Can you apply material design styles to this index.html?
בודקים את הקוד ורואים אם הוא עובד.

12. מעולה!

מזל טוב – הצלחתם לעבוד עם Gemini Code Assist על פרויקט לדוגמה כדי להבין איך הוא יכול לעזור ביצירת קוד, בהשלמת קוד, בסיכום קוד ובקבלת תשובות לשאלות לגבי Google Cloud.