إنشاء تطبيق لإنشاء الصور باستخدام Imagen وMesop في Cloud Shell

إنشاء تطبيق لإنشاء الصور باستخدام Imagen وMesop في Cloud Shell

لمحة عن هذا الدرس التطبيقي حول الترميز

subjectتاريخ التعديل الأخير: أبريل 4, 2025
account_circleتأليف: Katie Nguyen

1. مقدمة

تخيل إمكانية تحويل وصف نصي بسيط إلى صورة حيوية ومفصّلة في ثوانٍ. هذه هي قدرة الوسائط التوليدية، وهي مجال يتطوّر بسرعة ويعيد تشكيل طريقة إنشاء المحتوى المرئي والتفاعل معه. توفّر نماذج مثل Imagen 3 من Google على Vertex AI أحدث إمكانات الذكاء الاصطناعي التوليدي لمطوّري التطبيقات.

‫Imagen 3 هو نموذج تحويل النصوص إلى صور الأكثر جودة لدينا حتى الآن. ويمكنه إنشاء صور بتفاصيل مذهلة. وبالتالي، يمكن للمطوّرين التحكّم بشكل أكبر عند إنشاء منتجات الذكاء الاصطناعي من الجيل التالي التي تحوّل خيالهم إلى مواد عرض مرئية عالية الجودة. مزيد من المعلومات حول Imagen على Vertex AI

سيرشدك هذا الدرس التطبيقي حول الترميز إلى كيفية الاستفادة من إمكانات Imagen باستخدام حزمة تطوير البرامج (SDK) لتكنولوجيات الذكاء الاصطناعي التوليدي من Google. ستتعرّف ليس فقط على كيفية إنشاء صور مذهلة من طلبات نصية، بل ستتعرّف أيضًا على كيفية دمج هذه الميزة في تطبيق ويب باستخدام Mesop، وهو إطار عمل لواجهة مستخدم Python.

المُعطيات

  • كيفية استخدام حزمة تطوير البرامج (SDK) لتكنولوجيات الذكاء الاصطناعي التوليدي من Google لبرنامج Python من أجل التفاعل مع Imagen 3
  • كيفية إنشاء صور من الطلبات النصية
  • كيفية إنشاء تطبيق Mesop وتشغيله من Cloud Shell

المتطلبات

  • فهم أساسي للغة بايثون
  • تجربة تنفيذ الأوامر في وحدة طرفية في Cloud Shell
  • جهاز كمبيوتر يمكنه الوصول إلى Cloud Shell

2. إعداد البيئة وتثبيت التبعيات

  1. افتح محرِّر Cloud Shell.
  2. انقر على زر "فتح Terminal" في أعلى يسار الصفحة.
  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. ثبِّت حزمة تطوير البرامج (SDK) لتكنولوجيات الذكاء الاصطناعي التوليدي من Google لنظام التشغيل Python:
pip install google-genai
  1. أنشئ ملف Python:
touch main.py

3. إعداد التطبيق

ستتوفّر جميع الرموز البرمجية اللازمة لتشغيل تطبيق Mesop في main.py. في كل خطوة من الخطوات التالية، انسخ هذا الرمز والصقه بشكل تسلسلي في هذا الملف في محرِّر Cloud Shell.

استيراد المكتبات

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: الموقع في "مساحة التخزين في السحابة الإلكترونية" أو وحدات بايت الصورة لصورة تم إنشاؤها باستخدام 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 في مربّع رقم المنفذ، ثم انقر على "تغيير" و"معاينة". من المفترض أن تفتح نافذة جديدة يمكنك من خلالها عرض التطبيق المحمَّل. من المفترض أن تظهر على النحو التالي: لقطة شاشة التطبيق

8. اختبار Imagen 3

يمكنك هنا تجربة Imagen باستخدام طلباتك النصية. يمكنك إنشاء صور بأنماط مختلفة، بدءًا من الصور الواقعية إلى الصور المتحركة والأنماط الفنية المختلفة. يمكنك أيضًا تحديد زوايا كاميرا وعدسات معيّنة وغير ذلك. ستتم أيضًا إعادة كتابة طلبك النصي الأصلي من خلال ميزة مستندة إلى نموذج لغوي كبير (LLM) تهدف إلى إنشاء صور ذات جودة أعلى تعكس بشكل أفضل نية الطلب الأصلي.

ملاحظة: يتطلب إنشاء صور لأشخاص إذن وصول إضافيًا. في الوقت الحالي، سيظهر لك خطأ إذا كان طلبك يتضمّن إنشاء شخص أو وجه.

في ما يلي بعض الأمثلة على الطلبات التي يمكنك تجربتها:

  1. قبعة بيسبول رمادية اللون مكتوب عليها "مزاج جيد" في أعلى القبعة بحروف بيضاء مموّهة ومخيطّة ومُحدَّدة باللون الأخضر النيون
  2. متجر حلويات غريب
  3. بطاقة بريدية مرسومة لمدينة لاس فيغاس مع اسم المدينة مكتوبة وطوابع بريدية في الزاوية اليمنى
  4. جرو وقطة صغيرة يلعبان بكرة من خيوط الغزل

9. تنظيف

إيقاف التطبيق

ارجع إلى المحطة الطرفية التي أطلقت منها التطبيق وانتهِ منه باستخدام Ctrl C.

إيقاف البيئة الافتراضية

في الوحدة الطرفية نفسها، اكتب الأمر التالي:

deactivate

10. الخاتمة

تهانينا! لقد أكملت بنجاح هذا الدليل التعليمي عن الرموز البرمجية من خلال إنشاء تطبيق باستخدام Imagen وإنشاء بعض الصور.

استطلاع

يُرجى مشاركة رأيك في هذا الدليل التعليمي عن البرمجة من خلال ملء هذا الاستطلاع القصير.

الخطوات التالية

bug_report الإبلاغ عن خطأ