تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

نشر Imagen على Cloud Run

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

تاريخ آخر تعديل: 11‏ تشرين الأول (أكتوبر) 2024

الكاتب: لوري وايت

إنشاء الصور

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

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

التطبيق الذي ستصممه

في هذا الدرسّ التطبيقي، ستُنشئ تطبيقًا يتلقّى طلبًا نصيًا ويعرض صفحة ويب تتضمّن صورة تم إنشاؤها باستخدام هذا الطلب.

ما ستتعرّف عليه

في هذا الاختبار، ستتعرّف على ما يلي:

كيفية استخدام Google Imagen لإنشاء صور من طلبات نصية في بيئات أجهزة الكمبيوتر المحمول
الصعوبات في نقل رمز Imagen من دفتر ملاحظات إلى تطبيق ويب
كيفية نشر تطبيق Cloud Run يستخدم Imagen لإنشاء الصور
كيفية تضمين صورة من Imagen في HTML

تركّز ورشة رموز البرامج هذه على Imagen والنشر. يتم تجاهل المفاهيم غير ذات الصلة ووحدات الرموز البرمجية، ويتم توفيرها لك لنسخها ولصقها بسهولة.

المتطلبات

إصدار حديث من متصفّح Chrome
يجب أن تكون على دراية ببعض أساسيات Cloud Run. يمكنك الحصول على هذا من الدرس التطبيقي القصير نسبيًا حول الترميز هنا.
التعرّف على كيفية تعديل الملفات في Cloud Shell أو محرِّر Cloud Shell يمكنك الاطّلاع على مزيد من المعلومات عن Cloud Shell و"محرِّر Cloud Shell" من هذا الدرس التطبيقي حول الترميز.
مشروع على Google Cloud تم تفعيل الفوترة فيه سيوضّح لك هذا الدليل كيفية إنشاء مشروع. تتوفّر العديد من المنتجات التي تتضمّن فئات مجانية وفترات تجريبية مجانية.

يتوفّر الرمز الكامل لهذا الدرس التطبيقي حول الترميز على الرابط https://github.com/Annie29/imagen-deployment .

2. تفعيل واجهات برمجة التطبيقات

اختَر مشروعًا لاستخدامه في هذا الدليل التعليمي حول رموز البرامج. يمكنك إنشاء مشروع جديد لتسهيل إزالة كل عملك عند الانتهاء.

قبل أن تتمكّن من بدء استخدام Imagen، عليك تفعيل بعض واجهات برمجة التطبيقات.

انتقِل إلى Google Cloud Console.
انتقِل إلى لوحة بيانات Vertex AI.
اختَر "تفعيل جميع واجهات برمجة التطبيقات المقترَحة".

3- استكشاف Google Imagen (اختياري)

إذا كنت على دراية بخدمة Imagen، يمكنك تخطّي هذا القسم.

قبل محاولة إنشاء تطبيق ويب يستخدم Imagen، من المفيد معرفة ما يمكن أن يفعله هذا التطبيق. لحسن الحظ، هناك عدد من دفاتر الملاحظات التي تعمل على تشغيل رمز Imagen البسيط، لذا لنبدأ بأحد هذه الدفاتر.

انتقِل إلى دفتر البيانات على الرابط https://github.com/GoogleCloudPlatform/generative-ai/blob/main/vision/getting-started/image_generation.ipynb .
اختَر "فتح في Colab" لفتح دفتر الملاحظات في خادم دفاتر ملاحظات Google.
اختَر "الملف -> حفظ نسخة في Drive" أو انقر على "نسخ إلى Drive" في أعلى الصفحة لإنشاء نسختك الخاصة من دفتر الملاحظات هذا.
أغلِق النسخة الأصلية (لتجنُّب العمل على النسخة غير الصحيحة).
عليك الاتصال ببيئة تشغيل بالنقر على الزر "ربط" في أعلى يسار الصفحة.
ابدأ العمل على كل خلية في دفتر الملاحظات.
لتشغيل خلية، يمكنك النقر على [] أو السهم على يمين الخلية أو استخدام خيار "تشغيل الاختيار" من قائمة "وقت التشغيل" (أو اختصاره):
عند إعادة تشغيل وقت التشغيل الحالي، ستظهر لك رسالة تفيد بأنّ النظام قد تعطّل. لا داعي للقلق، هذا أمر طبيعي.
ستحتاج إلى مصادقة بيئة دفتر الملاحظات.
يمكنك إدخال رقم تعريف المشروع (وليس الاسم) والموقع الجغرافي (يعمل us-central1 إذا لم تكن قد حدّدت موقعًا جغرافيًا) في المربّعات على يسار الرمز وإدراجهما في الرمز من خلال Colab نيابةً عنك.
عند الوصول إلى "إنشاء صورة"، ستتمكّن من الاطّلاع على ما يمكن أن تُقدّمه لك أداة Imagen. يمكنك تغيير الطلب وإعادة تشغيل الخلية للاطّلاع على التنوع في الصور التي يمكنك الحصول عليها.
في هذه المرحلة، من المفترض أن تكون لديك فكرة جيدة عن كيفية إنشاء Imagen للصور من دفتر ملاحظات. يمكنك إكمال دفتر الملاحظات هذا للاطّلاع على مزيد من المعلومات عن مَعلمات الصور الآن أو في وقت مناسب.

4. بدء إنشاء تطبيق ويب لعرض صورة

سنستخدم لغة Python مع إطار عمل Flask على Cloud Run لإنشاء تطبيقنا.

يتم إعداد تطبيقات Python Flask في مجلد على النحو التالي:

app-folder
    templates
        template.html
        (etc.)
        anothertemplate.html
    main.py
    requirements.txt

النماذج هي ملفات تحتوي على صفحات HTML، وعادةً ما تحتوي على عناصر نائبة مُسمّاة حيث سيُدخِل البرنامج النص الذي تم إنشاؤه. main.py هو تطبيق خادم الويب نفسه، وrequirements.txt هي قائمة بجميع المكتبات غير العادية التي يستخدمها main.py.

سيتضمّن التطبيق صفحتَين، الأولى لعرض طلب والثانية لعرض الصورة والسماح للمستخدم بإدخال طلب آخر.

أولاً، أنشئ إطار العمل للمشروع.

إنشاء بنية الملف

يفترض هذا الدليل التعليمي حول رموز البرامج أنّ مشروعك في المجلد imageapp. إذا كنت تستخدم اسمًا مختلفًا، احرص على تعديل الأوامر وفقًا لذلك.

انتقِل إلى Cloud Shell من خلال النقر على رمز الطلب في أعلى يسار الشاشة.

يمكنك الحصول على مساحة أكبر للعمل إذا نقلت القشرة إلى علامة تبويب جديدة باستخدام السهم في أعلى نافذة القشرة:

من الدليل الرئيسي في Cloud Shell، أنشئ المجلد imageapp وانتقِل إليه وأنشئ المجلدات templates. ويمكنك إجراء ذلك من سطر الأوامر أو من محرِّر Cloud Shell.

إنشاء النماذج

سيتضمّن التطبيق صفحتَين، الأولى (التي سنُطلق عليها home.html) لعرض طلب، والثانية (التي سنُطلق عليها display.html) لعرض الصورة والسماح للمستخدم بإدخال طلب آخر.

باستخدام محرِّر Cloud Shell أو محرِّر Linux الذي تختاره، أنشئ نموذجَين. من مجلد imageapp/templates، أنشئ الصفحة الأولية التي سيراها المستخدم، home.html. ويستخدم المتغيّر prompt لعرض الوصف الذي يُدخله المستخدم.

templates/home.html

<!DOCTYPE html>
<html>
   <head>
       <title>Let's draw a picture</title>
   </head>
   <body>
       <h1>Let's draw a picture</h1>
       <form  action="/" method="post" >
           <input type="text" id="prompt" name="prompt">
           <input type="submit" value="Send">
       </form>
   </body>
</html>

بعد ذلك، أنشئ display.html لعرض الصورة. يُرجى العِلم أنّ الموقع الجغرافي للصورة سيكون في image_url.

templates/display.html

<!DOCTYPE html>
<html>
   <head>
       <title>Let's draw a picture</title>
   </head>
   <body>
       <h1>Let's draw a picture</h1>

       <div>
           <form  action="/" method="post" >
               <input type="text" id="prompt" name="prompt">
               <input type="submit" value="Send">
           </form>

           <p></p>
       </div>

       <div id="picture">
           <img id="pict" name="pict" alt="The created image" src="{{image_uri}}" style="width:100%;">
       </div>

   </body>
</html>

5- بدء الرمز البرمجي

عليك إنشاء الملف requirements.txt للتأكّد من توفّر جميع المكتبات التي يحتاجها برنامجك. في الوقت الحالي، ما عليك سوى تضمين flask في ملف requirements.txt.

يحتوي ملف main.py على الرمز الذي سيعرض طلبات الويب. هناك طلبان فقط علينا معالجتهما: طلب GET للصفحة الرئيسية، وطلب POST لإرسال النموذج الذي يصف الصورة التي نريد إنشاؤها.

باستخدام محرِّر Cloud Shell أو محرِّر Linux الذي تختاره، أنشئ ملف main.py في المجلد imageapp. سنبدأ بالإطار أدناه:

main.py

import flask

app = flask.Flask(__name__)

@app.route("/", methods=["GET"])
def home_page():
    return flask.render_template("home.html")

@app.route("/", methods=["POST"])
def display_image():
    # Code to get the prompt (called prompt) from the submitted form
    # Code to generate the image
    # Code to create a URL for the image (called image_url)

    return flask.render_template("display.html", prompt=prompt, image_url=image_url)

# Initialize the web server app when the code locally (Cloud Run handles it in that environment)
if __name__ == "__main__":
    app.run(debug=True, host="0.0.0.0", port=8080)

في الواقع، هذا هو التطبيق بأكمله تقريبًا. هناك ثلاثة تعليقات في display_image يجب توضيحها باستخدام رمز Python، وهذا كلّ ما في الأمر.

لنبدأ في ملء الأجزاء المفقودة. تسهّل Flask استرداد الطلب. أضِف سطرًا بعد التعليق كما هو موضّح أدناه:

# Code to get the prompt (called prompt) from the submitted form
prompt = flask.request.form["prompt"]

إذا أردت اختبار التطبيق الآن، يمكنك إضافة سطر قبل عبارة return في display_image لمنح قيمة لـ image_url (عنوان URL صالح يشير إلى صورة).

مثلاً: image_url="<your url here>"

يمكنك تشغيل البرنامج محليًا من Cloud Shell (باستخدام الأمر python main.py) ومعاينته باستخدام ميزة "المعاينة على المنفذ 8080" في أعلى يسار الشاشة.

وفقًا للبرنامج الحالي، ستظهر لك الصورة دائمًا في عنوان URL الذي قدّمته. لننتقل إلى كيفية الحصول على هذه القيمة من التطبيق. احرص على إزالة السطر الذي يمنح image_url قيمة ثابتة.

6- إنشاء الصورة

توفّر Google Cloud واجهة برمجة تطبيقات Python للذكاء الاصطناعي التوليدي على Vertex AI. لاستخدامها، علينا إضافة سطر لاستيرادها مع عمليات الاستيراد الأخرى بالقرب من أعلى برنامجنا:

from vertexai.vision_models import ImageGenerationModel

وأدرِج vertexai في ملف requirements.txt.

توضِّح المستندات الخاصة بـ ImageGenerationModel كيفية استخدامه. سننشئ نموذجًا ثمّ سننشئ صورة منه استنادًا إلى طلب. أضِف رمزًا إلى main.py للخطوة الثانية، وهي إنشاء الصورة وتخزينها في response:

# Code to generate the image
model = ImageGenerationModel.from_pretrained("imagegeneration@006")
response = model.generate_images(prompt=prompt)[0]

يمكن إنشاء ما يصل إلى 4 صور في المرة الواحدة، استنادًا إلى المَعلمات المُرسَلة إلى generate_images، لذا ستكون القيمة المعروضة هي قائمة GeneratedImage، حتى إذا كانت هناك صورة واحدة فقط معروضة، كما هو الحال في هذه الحالة.

نحتاج الآن إلى عرض الصورة على صفحة WWW. يحتوي GeneratedImage على طريقة show للصورة، ولكنّها لا تعمل إلا في بيئة دفتر ملاحظات. ولكن هناك طريقة لحفظ الصورة. سنحفظ الصورة ونرسل عنوان URL للصورة المحفوظة عند عرض النموذج.

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

نحتاج أولاً إلى حفظ الصورة. ولكن ما هو الاسم الذي سيتم اختياره؟ قد تحدث مشاكل عند استخدام اسم ثابت لأنّ البرنامج يمكن أن يستخدمه العديد من الأشخاص في الوقت نفسه. على الرغم من أنّه يمكننا إنشاء أسماء صور منفصلة لكل مستخدم (باستخدام معرّف مثل UUID)، إلا أنّ الطريقة الأسهل هي استخدام مكتبة tempfile في Python التي ستنشئ ملفًا مؤقتًا يحمل اسمًا فريدًا. ستنشئ التعليمة البرمجية أدناه ملفًا مؤقتًا وتحصل على اسمه وتكتب ردّ خطوة إنشاء الصورة في الملف المؤقت. لن نُدخله في الرمز بعد، لأنّنا نحتاج إلى الحصول على عنوان URL أولاً.

with tempfile.NamedTemporaryFile("wb") as f:
    filename = f.name
    response.save(filename, include_generation_parameters=False)
    # process the saved file here, before it goes away

هناك عدد من الطرق لمعالجة الملف المحفوظ، ولكن من أبسط الطرق وأكثرها أمانًا استخدام عنوان URL للبيانات.

تسمح عناوين URL للبيانات بإرسال البيانات الفعلية في عنوان URL، وليس فقط مسارًا إليها. بنية عنوان URL للبيانات هي:

data:[image/png][;base64],<data>

للحصول على ترميز base64 للصورة، سنحتاج إلى فتح الملف الذي حفظه tempfile وقراءته في متغيّر. نعم، ستكون هذه سلسلة كبيرة، ولكن من المفترض أن تكون مناسبة للمتصفحات والخوادم الحديثة. سنستخدم بعد ذلك مكتبة base64 لتشفير ذلك في سلسلة يمكننا إرسالها في عنوان URL للبيانات.

ستكون الرمز البرمجي النهائي لتنفيذ الخطوة الثالثة (إنشاء عنوان URL) على النحو التالي:

# Code to create a URL for the image (called image_url)
with tempfile.NamedTemporaryFile("wb") as f:
    filename = f.name
    response.save(filename, include_generation_parameters=False)
    # process the saved file here, before it goes away
    with open(filename, "rb") as image_file:
        binary_image = image_file.read()
        base64_image = base64.b64encode(binary_image).decode("utf-8")
        image_url = f"data:image/png;base64,{base64_image}"

يمكنك الاطّلاع على جميع هذه الخطوات في الصورة أدناه:

ستحتاج إلى استيراد tempfile وbase64 في بداية البرنامج.

import tempfile
import base64

حاوِل تشغيل برنامجك من Cloud Shell من خلال التأكّد من أنّك في المجلد الذي يتضمّن main.py وتنفيذ الأمر التالي:

python main.py

يمكنك بعد ذلك معاينته باستخدام ميزة "المعاينة على المنفذ 8080" في أعلى يسار الشاشة.

7- خطأ شائع

في مرحلة ما، قد تلاحظ أنّه عند تشغيل البرنامج (إما أثناء الاختبار أو بعد نشره)، تظهر لك رسالة مثل ما يلي:

يرجع سبب ذلك على الأرجح إلى طلب ينتهك الممارسات المسؤولة المتعلّقة بالذكاء الاصطناعي من Google . يمكن أن تؤدي رسالة بسيطة مثل "قطط صغيرة تلعب بالكرات الملونة" إلى حدوث هذه المشكلة. (لا داعي للقلق، يمكنك الحصول على صور "قطط صغيرة تلعب بألعاب ملونة").

لحلّ هذا الخطأ، سنضيف رمزًا لرصد الاستثناء الذي يتمّ طرحه عند محاولة إنشاء الصورة. في حال توفّر نموذج، سنعرض نموذج home.html مرة أخرى مع ظهور رسالة.

أولاً، لنضيف div في نموذج home.html بعد النموذج الأول الذي سيتم عرضه في حال حدوث خطأ:

<!DOCTYPE html>
<html>
   <head>
       <title>Let's draw a picture</title>
   </head>
   <body>
       <h1>Let's draw a picture</h1>
       <form  action="/" method="post" >
           <input type="text" id="prompt" name="prompt">
           <input type="submit" value="Send">
       </form>
       {% if mistake %}
       <div id="warning">
       The prompt contains sensitive words that violate
       <a href=\"https://ai.google/responsibility/responsible-ai-practices\">
           Google's Responsible AI practices</a>.
       Try rephrasing the prompt."</div>

       {% endif %}

   </body>
</html>

بعد ذلك، أضِف رمزًا في main.py لرصد استثناء محتمل عند استدعاء رمز generate_images في display_image. في حال حدوث استثناء، ستعرض الرمز نموذج home.html مع رسالة.

# Code to generate the image
   model = ImageGenerationModel.from_pretrained("imagegeneration@006")
   try:
       response = model.generate_images(prompt=prompt)[0]   
   except:
       #  This is probably due to a questionable prompt
       return flask.render_template("home.html", warning=True)

وهذه ليست ميزة الذكاء الاصطناعي المسؤول الوحيدة في Imagen. هناك عدد من الميزات التي تحمي إنشاء صور الأشخاص والأطفال والفلاتر العامة على الصور. يمكنك الاطّلاع على مزيد من المعلومات حول هذه الميزة هنا.

8. نشر التطبيق على الويب

يمكنك نشر التطبيق على الويب باستخدام الأمر من مجلد imageapp في Cloud Shell. احرص على استخدام رقم تعريف مشروعك الفعلي في الأمر.

gcloud run deploy imageapp \
  --source . \
  --region us-central1 \
  --allow-unauthenticated \
  --project your-project-id

من المفترض أن يظهر لك ردّ مثل ما يلي يُعلمك بمكان العثور على طلبك:

Service [imageapp] revision [imageapp-00001-t48] has been deployed and is serving 100 percent of traffic.
Service URL: https://imageapp-708208532564.us-central1.run.app```

9. تنظيف المحتوى

على الرغم من أنّ Cloud Run لا تحصّل رسومًا عندما تكون الخدمة غير مستخدَمة، قد يستمر تحصيل رسوم منك مقابل تخزين صورة الحاوية في Artifact Registry. يمكنك حذف مستودعك أو حذف مشروعك على Cloud لتجنُّب تحمُّل رسوم. يؤدي حذف مشروعك على Cloud إلى إيقاف الفوترة لجميع الموارد المستخدَمة في ذلك المشروع.

لحذف مستودع صور الحاويات:

gcloud artifacts repositories delete cloud-run-source-deploy \
  --location $REGION

لحذف خدمة Cloud Run:

gcloud run services delete imageapp \
  --platform managed \
  --region $REGION

لحذف مشروعك على Google Cloud:

استرداد رقم تعريف مشروعك الحالي:

PROJECT_ID=$(gcloud config get-value core/project)

تأكَّد من أنّ هذا هو المشروع الذي تريد حذفه:

echo $PROJECT_ID

لحذف المشروع:

gcloud projects delete $PROJECT_ID

10. تهانينا

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

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

اطّلِع على بعض هذه الدروس التطبيقية حول الترميز...