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

1. مقدمة

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

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

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

المتطلبات الأساسية

مشروع على Google Cloud تم تفعيل الفوترة وVertex AI API فيه مزيد من المعلومات حول إعداد مشروع وبيئة تطوير

أهداف الدورة التعليمية

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

المتطلبات

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

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

افتح محرِّر Cloud Shell.
انقر على الزر "فتح نافذة Terminal" (Open Terminal) في أعلى يسار الصفحة
أنشئ مجلدًا جديدًا عن طريق إدخال الأمر التالي في الوحدة الطرفية:

mkdir my-imagen-app

غيِّر الأدلة إلى مجلدك الجديد:

cd my-imagen-app

أنشئ بيئة افتراضية في Python 3:

python3 -m venv myenv

فعِّل البيئة الافتراضية:

source myenv/bin/activate

ثبِّت Mesop:

pip3 install mesop

ثبِّت حزمة تطوير البرامج (SDK) من Google للذكاء الاصطناعي التوليدي في Python:

pip install google-genai

أنشئ ملف Python:

touch main.py

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

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

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

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

ضبط معلومات مشروع على السحابة الإلكترونية من Google وإنشاء عميل

اضبط رقم تعريف مشروعك:

PROJECT_ID = "[your-project-id]"

استبدِل [your-project-id] باسم مشروعك على Google Cloud عند نسخ سطر الرمز هذا.

إنشاء عميل:

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

بعد نسخ جميع مقتطفات الرموز إلى main.py، يمكنك تشغيل تطبيق Mesop من نافذة Cloud Shell.
```
mesop main.py
```
الآن، انقر على الزر "معاينة الويب" (Web Preview) في أعلى يسار الصفحة، ثم انقر على "تغيير المنفذ" (Change port). اكتب 32123 في مربّع "رقم المنفذ"، ثم انقر على "تغيير ومعاينة". من المفترض أن تفتح نافذة جديدة يمكنك فيها عرض التطبيق الذي تم تحميله، ويجب أن تبدو على النحو التالي:

8. اختبار Imagen 3

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

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

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

قبعة بيسبول بيج مكتوب عليها "good vibes" (أجواء إيجابية) بأحرف بيضاء بارزة ومخيطة ومحدّدة باللون الأخضر النيون
متجر حلويات غريب
بطاقة بريدية كرتونية لمدينة لاس فيغاس مع اسم المدينة مكتوبًا وطابع بريدي في الزاوية اليسرى
جرو وقطة صغيرة يلعبان بكرة من خيوط الغزل

9- تنظيف

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

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

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

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

deactivate

10. الخاتمة

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

استطلاع

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