פיתוח אפליקציה ליצירת תמונות באמצעות Imagen ו-Mesop ב-Cloud Shell

פיתוח אפליקציה ליצירת תמונות באמצעות Imagen ו-Mesop ב-Cloud Shell

מידע על Codelab זה

subjectהעדכון האחרון: אפר׳ 4, 2025
account_circleנכתב על ידי Katie Nguyen

1.‏ מבוא

נסו לדמיין איך אפשר להפוך תיאור טקסט פשוט לתמונה עשירה ומפורטת בשניות. זוהי העוצמה של מדיה גנרטיבית, תחום שמתפתח במהירות ומשנה את האופן שבו יוצרים תוכן חזותי ומקיימים איתו אינטראקציה. מודלים כמו Imagen 3 של Google ב-Vertex AI מספקים למפתחי אפליקציות יכולות AI גנרטיביות מתקדמות.

Imagen 3 הוא המודל של Google באיכות הגבוהה ביותר להמרת טקסט לתמונה עד היום. הוא מסוגל ליצור תמונות עם פרטים מדהימים. כך למפתחים יש יותר שליטה בבניית מוצרי AI מדור הבא שמאפשרים להם להפוך את הדמיון שלהם לנכסים חזותיים באיכות גבוהה. מידע נוסף על Imagen ב-Vertex AI

בשיעור הזה תלמדו איך לנצל את מלוא הפוטנציאל של Imagen באמצעות Google Gen AI SDK. בנוסף ליצירת תמונות מדהימות מהנחיות טקסט, תלמדו גם איך לשלב את היכולת הזו באפליקציית אינטרנט באמצעות Mesop, מסגרת של ממשק משתמש ב-Python.

מה תלמדו

  • איך משתמשים ב-Google Gen AI SDK ל-Python כדי ליצור אינטראקציה עם Imagen 3
  • איך יוצרים תמונות מהנחיות בטקסט
  • איך יוצרים אפליקציית Mesos ומריצים אותה מ-Cloud Shell

מה נדרש

  • הבנה בסיסית של Python
  • איך מריצים פקודות בטרמינל של Cloud Shell
  • מחשב עם גישה ל-Cloud Shell

2.‏ הגדרת הסביבה והתקנת יחסי התלות

  1. פותחים את Cloud Shell Editor.
  2. לוחצים על הלחצן 'פתיחת מסוף' בפינה השמאלית העליונה.
  3. כדי ליצור תיקייה חדשה, מזינים את הפקודה הבאה בטרמינל:
mkdir my-imagen-app
  1. עוברים לתיקייה החדשה:
cd my-imagen-app
  1. יוצרים סביבה וירטואלית ב-Python 3:
python3 -m venv myenv
  1. מפעילים את הסביבה הווירטואלית:
source myenv/bin/activate
  1. מתקינים את Mesop:
pip3 install mesop
  1. מתקינים את Google Gen AI SDK ל-Python:
pip install google-genai
  1. יוצרים קובץ Python:
touch main.py

3.‏ הגדרת האפליקציה

כל הקוד הנדרש להרצת אפליקציית Mesop יהיה ב-main.py. בכל אחד מהשלבים הבאים, מעתיקים את הקוד ומדביקים אותו ברצף בקובץ הזה ב-Cloud Shell Editor.

ייבוא ספריות

import base64
import mesop as me
from google import genai
from google.genai import types

הגדרת פרטי הפרויקט ב-Google Cloud ויצירת לקוח

  1. מגדירים את מזהה הפרויקט:
PROJECT_ID = "[your-project-id]"

כשמעתיקים את שורת הקוד הזו, מחליפים את [your-project-id] בשם הפרויקט ב-Google Cloud.

  1. יצירת לקוח:
client = genai.Client(vertexai=True, project=PROJECT_ID, location="us-central1")

טעינת מודל יצירת התמונות

imagen_model = "imagen-3.0-generate-002"

ניהול המצב

הגדרת ניהול המצב מאפשרת לכם לשמור מידע לאורך כל התהליך שעובר המשתמש.

@me.stateclass
class State:
   input: str = ""
   enhanced_prompt: str = ""
   img_data: str = "https://storage.googleapis.com/cloud-samples-data/generative-ai/image/flowers.png"
  • input: הקלט שהמשתמש סיפק, שישמש ליצירת התמונה.
  • enhanced_prompt: המודל imagen-3.0-generate-002 מציע אפשרות לשפר את ההנחיה שסיפקתם. המערכת תיצור הנחיה חדשה ומפורטת מהנחיה המקורית כדי לעזור ליצור תמונות באיכות גבוהה יותר, והיא תוחזר במשתנה הזה.
  • img_data: המיקום ב-Cloud Storage או הבייטים של התמונה שנוצרה באמצעות Imagen 3.

4.‏ הגדרת פונקציות עזר

פונקציית טעינה

הקוד הזה יבוצע כשהאפליקציה תיטען. הוא מגדיר את מצב האפליקציה לצבעים של המערכת.

def load(e: me.LoadEvent):
  me.set_theme_mode("system")

פונקציית טשטוש

הפונקציה הזו שומרת את הקלט של המשתמש במשתנה המצב.

def on_blur(e: me.InputBlurEvent):
    state = me.state(State)
    state.input = e.value

5.‏ יצירת תמונה באמצעות Imagen

הפונקציה הזו מופעלת כשמשתמש לוחץ על לחצן כדי לשלוח הנחיה בטקסט ליצירת תמונה.

def generate_image(e: me.ClickEvent):
    state = me.state(State)
    image = client.models.generate_images(
        model=imagen_model,
        prompt=state.input,
        config=types.GenerateImagesConfig(
            number_of_images=1,
            aspect_ratio="1:1",
            enhance_prompt=True,
            safety_filter_level="BLOCK_MEDIUM_AND_ABOVE",
            person_generation="DONT_ALLOW",
        )
    )
    img = image.generated_images[0].image.image_bytes
    # Encode image in Base64 to display in web app
    img64 = base64.b64encode(img).decode('utf-8')
    state.enhanced_prompt = image.generated_images[0].enhanced_prompt
    state.img_data = f"data:image/png;base64,{img64}"

אפשר להגדיר את ההגדרות שב-GenerateImagesConfig:

  • number_of_images: 1, 2, 3, 4
  • aspect_ratio: ‏ 1:1, ‏ 9:16, ‏ 16:9, ‏ 3:4, ‏ 4:3
  • safety_filter_level: ‏ BLOCK_LOW_AND_ABOVE, ‏ BLOCK_MEDIUM_AND_ABOVE, ‏ BLOCK_ONLY_HIGH, ‏ BLOCK_NONE
  • person_generation: DONT_ALLOW, ‏ ALLOW_ADULT, ‏ ALLOW_ALL

הערה: האפשרות היחידה שתעבוד בלי הוספת כתובות לאישור היא DONT_ALLOW.

6.‏ מבנה הפריסה של האפליקציה

@me.page(
  on_load=load,
  path="/",
  title="Imagen 3",
)
def app():
   s = me.state(State)
   with me.box(
        style=me.Style(
            display="grid",
            width="100%",
            place_items="center",
            margin=me.Margin(top=100),
         )
    ):
        me.text(text="Imagen 3: Image Generation", type="headline-3", style=me.Style(font_family="Google Sans"))
        with me.box(
           style=me.Style(
              border_radius=16,
              padding=me.Padding.all(8),
              display="flex",
           )
        ):
            with me.box(
               style=me.Style(flex_grow=1)
            ):
                me.native_textarea(
                autosize=True,
                on_blur=on_blur,
                min_rows=8,
                placeholder="Enter your image prompt",
                style=me.Style(
                    padding=me.Padding(top=16, left=16),
                    width="700px",
                    border_radius=16,
                    outline="none",
                    overflow_y="auto",
                    border=me.Border.all(
                        me.BorderSide(style="none"),
                    ),
                    font_family="Google Sans",
                  ),
                )
            with me.content_button(
                type="icon",
                on_click=generate_image,
            ):
                me.icon("send")
        with me.box(style=me.Style(margin=me.Margin.all(8),
            width="700px",
            display="flex",
            align_items="center")
        ):
            me.image(
              src=s.img_data,
              style=me.Style(width="350px", padding=me.Padding.all(16), border_radius=36)
            )
            with me.box(
               style=me.Style(
                  padding=me.Padding.all(8),
                  background="white",
                  height="400px",
                  width="400px",
                  border_radius=16,
               )
            ):
                me.text(text="Enhanced Prompt:", style=me.Style(font_family="Google Sans", font_weight="bold"))
                me.text(text=s.enhanced_prompt, style=me.Style(padding=me.Padding.all(10), font_family="Google Sans"),
            )

הקוד הזה יוצר אפליקציה של דף יחיד שכוללת את הרכיבים הבאים:

  • כותרת
  • אזור הטקסט להזנת הנחיה לתמונה
  • כפתור שליחה שמפעיל את הפונקציה generate_image
  • תמונה שנוצרה על ידי Imagen
  • ההנחיה המשופרת שהוחזרה עם התמונה

7.‏ הפעלת אפליקציה ב-Cloud Shell

  1. אחרי שמעתיקים את כל קטעי הקוד אל main.py, אפשר להריץ את אפליקציית Mesop מהטרמינל של Cloud Shell.
    mesop main.py
  2. עכשיו לוחצים על הלחצן 'תצוגה מקדימה באתר' בפינה השמאלית העליונה, ואז לוחצים על 'שינוי יציאה'. מזינים 32123 בתיבה Port Number (מספר יציאה) ולוחצים על Change and Preview (שינוי ותצוגה מקדימה). אמור להיפתח חלון חדש שבו תוכלו לראות את האפליקציה שנטענה. הוא אמור להיראות כך: צילום מסך של האפליקציה

8.‏ בדיקת Imagen 3

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

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

הנה כמה דוגמאות להנחיות שאפשר לנסות:

  1. כובע בייסבול בצבע בז' עם הכיתוב 'good vibes' (אנרגיות טובות) באותיות לבנות מרקמות עם קווים ירוקים מניאון.
  2. חנות ממתקים שובבה.
  3. גלויה בסגנון קריקטורה של לאס וגאס עם שם העיר באיות ועם חותמת דואר בפינה הימנית.
  4. גורי כלב וחתלתול משחקים עם כדור צמר.

9.‏ הסרת המשאבים

עצירת האפליקציה

חוזרים למסוף שבו הפעלתם את האפליקציה ויוצאים באמצעות Ctrl C.

השבתת הסביבה הווירטואלית

באותו מסוף, מקלידים את הפקודה הבאה:

deactivate

10.‏ סיכום

מעולה! סיימתם את הקודלאב הזה, שבו יצרתם אפליקציה באמצעות Imagen ויצרת תמונות.

סקר

נשמח לשמוע מה חשבתם על הקודלאב הזה. תוכלו למלא את הסקר הקצר הזה.

השלבים הבאים

bug_report דיווח על טעות