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

1. מבוא

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

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

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

דרישות מוקדמות

• פרויקט ב-Google Cloud עם חיוב מופעל ועם Vertex AI API מופעל. מידע נוסף על הגדרת פרויקט וסביבת פיתוח

מה תלמדו

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

הדרישות

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

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

1. פותחים את Cloud Shell Editor.
2. לוחצים על הלחצן 'פתיחת מסוף' בפינה השמאלית העליונה.
3. כדי ליצור תיקייה חדשה, מזינים את הפקודה הבאה בטרמינל:

mkdir my-imagen-app

4. משנים את הספריות לתיקייה החדשה:

cd my-imagen-app

5. יוצרים סביבה וירטואלית ב-Python 3:

python3 -m venv myenv

6. מפעילים את הסביבה הווירטואלית:

source myenv/bin/activate

7. התקנת Mesop:

pip3 install mesop

8. מתקינים את Google Gen AI SDK ל-Python:

pip install google-genai

9. יוצרים קובץ 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.

2. יצירת לקוח:

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. עכשיו לוחצים על הלחצן Web Preview (תצוגה מקדימה של האתר) בפינה השמאלית העליונה ואז על Change port (שינוי היציאה). מקלידים 32123 בתיבה 'מספר לניוד' ואז לוחצים על 'שינוי ותצוגה מקדימה'. אמור להיפתח חלון חדש שבו אפשר לראות את האפליקציה שנטענה. היא אמורה להיראות בערך כך:

8. Test Imagen 3

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

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

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

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

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

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

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

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

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

deactivate

10. סיכום

מעולה! סיימתם בהצלחה את ה-Codelab הזה. יצרתם אפליקציה באמצעות Imagen וגיליתם איך ליצור תמונות.

סקר

נשמח לשמוע מה דעתך על ה-codelab הזה. אפשר למלא את הסקר הקצר הזה.

השלבים הבאים

• מאמרי עזרה של Imagen
• מחברת ליצירת תמונות ב-Imagen 3
• מדריך למפתחים בנושא Imagen 3 ב-Vertex AI