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

رسم موقع إلكتروني: يمكنك تحويل أفكارك إلى موقع إلكتروني باستخدام نماذج Gemini.

1. مقدمة

في عالم تطوير الويب، يمكن أن تكون عملية تحويل مفهوم التصميم إلى موقع ويب فعال معقّدة وتستغرق وقتًا طويلاً. ومع ذلك، مع توفُّر نماذج الذكاء الاصطناعي التوليدي، مثل Gemini، يتزايد تبسيط هذه العملية وتسهيل الوصول إليها. سنبني حلاً متخصص في تحويل الإطارات الشبكية المرسومة يدويًا إلى رمز موقع ويب. تُمكِّن هذه الأداة الفعالة المصممين والمطورين على حد سواء من تنفيذ رؤاهم الخاصة بمواقعهم الإلكترونية بسهولة وفعالية غير مسبوقة.

في هذا الدرس التطبيقي، سننشئ تطبيق ويب يتيح للمستخدمين إنشاء رمز برمجي للموقع الإلكتروني (html وcss وJavaScript) من الإطارات الشبكية والطلبات التي يُدخلها المستخدم باستخدام نماذج الذكاء الاصطناعي التوليدي من Vertex AI (مثل Gemini 1.5 Flash وGemini 1.5 Pro وما إلى ذلك). سيتم إنشاء التطبيق باستخدام Flask، وهو إطار عمل رائج على الويب في Python، وسيستخدم مكتبة برامج Vertex AI للتفاعل مع خدمة النماذج التوليدية.

ما الذي ستنشئه

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

سيبدو تطبيق الويب على النحو التالي:

سير عمل التطبيق

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

سنبدأ بمناقشة أساسيات الإطارات الشبكية والمطالبات، وكيف يمكن استخدامها لإنشاء رمز موقع الويب. سننتقل بعد ذلك إلى خطوات إنشاء تطبيق الويب، بما في ذلك كيفية التعامل مع البيانات التي يُدخلها المستخدمون وإنشاء الردود وعرض النتائج.

2. قبل البدء

في Google Cloud Console، ضمن صفحة أداة اختيار المشاريع، اختَر مشروعًا على Google Cloud أو أنشئه.
تأكَّد من تفعيل الفوترة لمشروعك على Google Cloud. تعرَّف على كيفية التحقّق مما إذا كانت الفوترة مفعَّلة في مشروع.
ستستخدم Cloud Shell، وهي بيئة سطر أوامر يتم تشغيلها في Google Cloud. وللوصول إليها، انقر على "تفعيل Cloud Shell" في أعلى وحدة تحكُّم Google Cloud.

بعد الربط بخدمة Cloud Shell، يمكنك التحقّق من أنّه تمت مصادقتك من قبل وأنّ المشروع مضبوط على رقم تعريف المشروع باستخدام الأمر التالي:

gcloud auth list

شغّل الأمر التالي في Cloud Shell للتأكد من معرفة الأمر gcloud بمشروعك.

gcloud config list project

إذا لم يتم ضبط مشروعك، استخدِم الأمر التالي لضبطه:

gcloud config set project <YOUR_PROJECT_ID>

تأكَّد من تفعيل واجهات برمجة التطبيقات التالية:

Cloud Run
Vertex AI

البديل لاستخدام الأمر gcloud هو الانتقال من خلال وحدة التحكّم باستخدام هذا الرابط. يُرجى الاطّلاع على المستندات حول أوامر gcloud واستخدامها.

3- الخطوة 1: بدء تشغيل تطبيق ويب Python Cloud Run

سننشئ أولاً نموذج تطبيق الويب Python Cloud Run من Cloud Shell.

انتقِل إلى Cloud Shell Terminal وانقر على الزر "فتح المحرِّر".

تأكَّد من ضبط مشروع Cloud Code في أسفل يمين (شريط الحالة) في محرِّر Cloud Shell، كما هو موضّح في الصورة أدناه، وأنّه تم ضبطه على مشروع Google Cloud النشِط الذي تمّ تفعيل الفوترة فيه. تفويض إذا طُلب منك ذلك.

انقر على المشروع النشط في شريط الحالة وانتظِر إلى أن تظهر رسالة Cloud Code المنبثقة. في النافذة المنبثقة، اختَر "تطبيق جديد".

من قائمة التطبيقات، اختر تطبيق Cloud Run:

بالنسبة للصفحة 2/2، حدد نموذج Python Flask:

أدخِل اسم المشروع كما تريد (على سبيل المثال، "amazing-gemini-app") وانقر على حسنًا:

سيؤدي هذا إلى فتح القالب للمشروع الجديد الذي أعددته للتو.

بهذه الطريقة، يكون من السهل بدء تشغيل تطبيق ويب باستخدام Google Cloud Shell.

4. الخطوة 2: إنشاء الواجهة الأمامية

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

انسخ الرمز أدناه واستبدل ملف index.html في مجلد templates:

<!DOCTYPE html>
<html>
<head>
   <title>Draw a Website</title>
   <style>
       body {
           font-family: sans-serif;
           display: flex;
           justify-content: center;
           align-items: center;
           min-height: 100vh; /* Ensure form is centered vertically */
           background-color: #f4f4f4;
       }
       .container {
           background-color: white;
           padding: 30px;
           border-radius: 8px;
           box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
           text-align: center;
       }
       h2 {
           text-align: center;
           margin-bottom: 20px;
       }
       input[type="file"], textarea, select {
           width: 100%;
           padding:10px;
           margin-bottom: 15px;
           border: 1px solid #ccc;
           border-radius: 4px;
           box-sizing: border-box;
       }
       button {
           background-color: #4CAF50;
           color: white;
           padding: 12px 20px;
           border: none;
           border-radius: 4px;
           cursor: pointer;
       }
   </style>
</head>
<body>
   <div class="container">
       <h2>Draw a Website</h2>
       <form action="/response" target="_blank" method="post" enctype="multipart/form-data">
           <input type="file" id="image-upload" name="image-upload" accept=".png, .jpg, .jpeg">
           <select name="model">
               <option value="gemini-1.5-flash-001">Gemini 1.5 Flash</option>
               <option value="gemini-1.5-pro-001">Gemini 1.5 Pro</option>
               <option value="gemini-1.0-pro-vision-001">Gemini 1.0 Pro Vision</option>
               </select>
           <textarea name="prompt" placeholder="Write your prompt here. For example: 'Convert this drawing into an html page'">Convert this drawing into an html page</textarea>
           <button type="submit">Submit</button>
       </form>
   </div>
</body>
</html>

عندما يتفاعل المستخدم مع التطبيق، تحدث الإجراءات التالية:

يحدد المستخدم صورة الإطار الشبكي، ويحدد نموذجًا، ثم يُدخل مطالبة.
عندما ينقر المستخدم على زر "إرسال" سيتم إرسال بيانات النموذج (الصورة والنموذج والمطالبة) إلى عنوان URL /response باستخدام طريقة HTTP POST.
يعالج الرمز من جهة الخادم (الذي يتم تنفيذه في app.py) بيانات النموذج وينشئ استجابة باستخدام النموذج والطلب المحدّدين.
يتم عرض الردّ الذي تم إنشاؤه في علامة التبويب الجديدة.

نحن جاهزون الآن باستخدام جزء الواجهة الأمامية لتطبيق الويب.

5- الخطوة 3: إنشاء الخلفية (الذكاء الاصطناعي التوليدي)

دعنا نكتب الجزء الرئيسي من تطبيق الويب هذا. يشير ذلك المصطلح إلى ملف app.py يحوّل الصورة التي يُدخلها المستخدِم واختيار النموذج إلى رمز الموقع الإلكتروني.

انسخ الرمز الكامل لـ app.py:

# Import the necessary libraries.
import os
import random
from flask import (
    Flask,
    render_template,
    request,
    redirect
)

import vertexai
from vertexai.generative_models import (
    GenerativeModel,
    Image
)

# Initialize the Flask app.
app = Flask(__name__)
app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16 MB per image

# TODO: Replace "YOUR_PROJECT_ID" before running
# Initialize the Vertex AI client library.
vertexai.init(project="YOUR_PROJECT_ID", location="us-central1")

# Define a function to generate response from a wireframe and a prompt.
def generate(wireframe, model, prompt):
    '''Generates a response from a wireframe and a prompt.
    Args:
    wireframe: The wireframe image.
    model: The generative model to use.
    prompt: The prompt to use.
    Returns:The generated response.
    '''
    # Create a GenerativeModel object.
    model = GenerativeModel(model)

    # Create a list of contents to pass to the model.
    contents = [
        wireframe,
        prompt
    ]
   
    # Generate the response.
    responses = model.generate_content(
        contents=contents,
        stream=True,
    )

    # Concatenate the response text.
    response = ""
    for res in responses:
        response += res.text.strip()
   
    # Return the generated response.
    return response

# Define the home page route.
@app.route('/', methods=['GET'])
def index():
    '''Renders the home page.
    Returns:The rendered template.
    '''
    return render_template('index.html')

# Define the response route.
@app.route('/response', methods=['GET', 'POST'])
def response():
    '''Handles the response to the user's input.
    Returns:The rendered template.
    '''
    # If the request is a POST request, process the form data.
    if request.method == 'POST':
        # Get the uploaded image from the request.
        uploaded_image = request.files['image-upload']
       
        # Convert the uploaded image to a wireframe image.
        wireframe = Image.from_bytes(uploaded_image.read())

        # Get the model and prompt from the request.
        model = request.form['model']
        prompt = request.form['prompt']
       
        # Generate the response and render the response.
        try:
            response = generate(wireframe, model, prompt)
            response = response.replace("```html", "").replace("```", "").strip()
            return response
        except ValueError as e:
            raise e
   
    # If the request is a GET request, redirect to the home page.
    else:
        return redirect('/')

# Run the app.
if __name__ == '__main__':
    # Get the server port from the environment variables.
    server_port = os.environ.get('PORT', '8080')

    # Run the app.
    app.run(debug=False, port=server_port, host='0.0.0.0')

ما يلي في جوهره وظيفة التعليمات البرمجية:

يستورد هذا الرمز المكتبات الضرورية للتطبيق:

Flask: هو إطار عمل خفيف على الويب للغة Python.

os: للتفاعل مع نظام التشغيل.

عشوائية: لإنتاج أرقام عشوائية.

رأس الصفحة: مكتبة عملاء Vertex AI.

النموذج التوليدي والصور: الفئات المتوفّرة في مكتبة نماذج الذكاء الاصطناعي التوليدي من Vertex.

تهيئة تطبيق الدوار:

بعد ذلك، يتم إعداد تطبيق Flask وضبط الحجم المسموح به للصور المحمَّلة على 16 ميغابايت.

جارٍ إعداد Vertex AI Client

يؤدي هذا الإجراء إلى إعداد مكتبة عملاء Vertex AI باستخدام رقم تعريف المشروع المحدّد والموقع الجغرافي. تأكد من استبدال YOUR_PROJECT_ID برقم تعريف مشروعك.

تعريف دالة الإنشاء

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

تحديد مسار الصفحة الرئيسية

تحدد هذه الدالة مسار الصفحة الرئيسية. عندما يزور أحد المستخدمين عنوان URL الجذر للتطبيق، يتم استدعاء هذه الدالة. ويعرض القالب index.html، وهو الصفحة الرئيسية للتطبيق.

تحديد مسار الاستجابة

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

تشغيل التطبيق

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

6- الخطوة 4: إعداد التبعيات والملف الشامل

تأكد من وجود التبعيات التالية في ملفrequirements.txt:

Flask==2.3.3
requests==2.31.0
debugpy # Required for debugging.
google-cloud-aiplatform>=1.38

استبدِل محتوى الملف الشامل بما يلي:

# Python image to use.
FROM python:3.11-slim

# Set the working directory to /app
WORKDIR /app

# copy the requirements file used for dependencies
COPY requirements.txt .

# Install any needed packages specified in requirements.txt
RUN pip install -r requirements.txt

# Copy the rest of the working directory contents into the container at /app
COPY . .

# Run app.py when the container launches
ENTRYPOINT ["python", "app.py"]

7. الخطوة 5: نشر تطبيق الويب

الآن وبعد أن تم إنشاء مكونات التطبيق، لننشر التطبيق.

انتقِل إلى الوحدة الطرفية في Cloud Shell وتأكَّد من ضبط المشروع الحالي على مشروعك النشِط، وإذا لم يكن الأمر كذلك، يمكنك استخدام الأمر gcloud Configuration (ضبط إعدادات المشروع) لضبط رقم تعريف المشروع:

gcloud config set project [PROJECT_ID]

ثم أدخل الأوامر التالية بهذا الترتيب واحدًا تلو الآخر:

cd draw-a-website
gcloud run deploy --source .

سيُطلب منك إدخال اسم لخدمتك، لنفترض "draw-website". اختَر الرقم المناسب للمنطقة us-central1. قُل "y" وعندما يسألك ما إذا كنت تريد السماح بعمليات الاستدعاء غير المُصدَّق عليها. تجدر الإشارة إلى أنّنا نسمح هنا بالوصول غير المُصدَّق عليه لأنّ هذا تطبيق تجريبي. نقترح عليك استخدام المصادقة المناسبة لمؤسستك وتطبيقات الإنتاج.

بعد اكتمال عملية النشر، من المفترض أن تحصل على رابط مشابه لما يلي:

**https://draw-website-*****eua-uc.a.run.app/

اختبار تطبيقك:

8. تَنظيم

لتجنُّب تحمُّل الرسوم من حسابك على Google Cloud مقابل الموارد المستخدَمة في هذا الدرس التطبيقي حول الترميز، اتّبِع الخطوات التالية:

في وحدة تحكُّم Google Cloud، انتقِل إلى صفحة إدارة الموارد.
في قائمة المشاريع، اختَر المشروع الذي تريد حذفه، ثم انقر على حذف.
في مربّع الحوار، اكتب رقم تعريف المشروع، ثم انقر على إيقاف التشغيل لحذف المشروع.
بدلاً من ذلك، يمكنك الانتقال إلى التشغيل في السحابة الإلكترونية في وحدة التحكّم، واختيار الخدمة التي نشرتها للتوّ واحذفها.

9. تهانينا

تهانينا لقد نجحت في إنشاء تطبيق ويب سريع في Python Flask تم نشره على Cloud Run لتحويل الرسومات إلى مواقع إلكترونية. يمكنك الاطّلاع على المستودع الكامل هنا. يعرض تطبيق الرسم المخصّص للمواقع الإلكترونية القوة التحويلية لـ Gemini في تسهيل عملية التطوير على الويب. ومن خلال الاستفادة من الذكاء الاصطناعي، يمكننا مساعدة المصممين والمطوّرين على إنشاء مواقع إلكترونية بسرعة ودقة وإبداع أكبر. مع استمرار تطوّر نماذج الذكاء الاصطناعي التوليدي، يمكننا توقّع المزيد من التطبيقات المبتكرة في المستقبل.