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

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

1. מבוא

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

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

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

מה עושים...

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

מה תלמדו...

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

מה צריך...

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

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

2. הגדרה

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

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

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

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

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

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

Gemini ל-Cloud יענה על השאלה שלך. אפשר ללחוץ על הסמל בפינה השמאלית העליונה כדי לסגור את חלון הצ'אט של Gemini ל-Cloud.

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

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

נכנסים לכתובת ide.cloud.google.com. יכול להיות שיעבור קצת זמן עד שסביבת הפיתוח המשולבת תופיע, אז צריך להתאזר בסבלנות.
לוחצים על הלחצן Cloud Code – כניסה בשורת הסטטוס התחתונה, כמו שמוצג. מאשרים את הפלאגין לפי ההוראות. אם בשורת הסטטוס כתוב Cloud Code – אין פרויקט, בוחרים את הפרויקט הספציפי ב-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 יופיע בשורת הסטטוס בסביבת הפיתוח המשולבת (IDE).

3. איך פורסים את הפתרון 'התחלה מהירה' של סיכום AI

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

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

4. שיחה עם Gemini

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

הפעולה הזו תפתח את חלונית הצ'אט: חלונית GeminiI בסביבת הפיתוח המשולבת Cloud Shell, ותוכלו להתכתב בצ'אט עם 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. חשוב גם לשים לב שהאינטראקציה הזו בצ'אט מבוססת על ההקשר של הקבצים שאתם עובדים עליהם בסביבת הפיתוח המשולבת(IDE).

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

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

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

או

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

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

הפתרון הזה למתחילים מוצג כאן:

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

לוחצים על הקובץ הזה. נקודת הכניסה לפונקציה של Cloud Functions היא הפונקציה 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 framework לאפליקציות אינטרנט כדי לפתח את זה בעזרת Duet AI.

בואו נתחיל. אנחנו נניח שעדיין יש לכם את אותו סביבת עבודה פתוחה בסביבת הפיתוח המשולבת של 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 ברמה הבסיסית (root) של סביבת העבודה המשולבת (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?

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

כדאי ליצור תיקייה בשם תבניות בתיקיית השורש ולשמור בה את הקובץ 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. עוברים ל-Command Palette ב-Cloud Shell IDE באופן הבא:

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

מפעילים את ה-Terminal עכשיו, כפי שמוצג בהמשך:

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

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. (אופציונלי) Open Explore – פריסה ל-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.